使用node.js实现微信小程序实时聊天功能


Posted in Javascript onAugust 13, 2018

在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的。但领导要求了,总是要干的。

然后就实时通讯这个关键词展开搜索,穿梭于网页之间。不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和node.js的,然后搜索这两是啥,什么关系,总算明白了一点。

最后确定了第一步需要干的是用node.js搭建服务(我是装在自己的windows下的):

1.首先到官网下载node.js,下载链接

   安装很简单,双击下载好的文件,直接下一步一步,没什么特殊的选择,路径默认就好

   可以打开命令行窗口输入 node -v会输出版本,来检验是否安装成功,其实这个也没什么必要

使用node.js实现微信小程序实时聊天功能

2.然后新建一个文件夹(我的node.js是安装在Ç盘的,然后再d盘下新建了个叫webSocket的文件夹)

   然后用命令转到该目录下:在这个文件下安装我们要使用的模块:安装模块前需要先生成一个配置文件,不然会报错(反正我报了)

使用node.js实现微信小程序实时聊天功能

   生成配置文件命令:npm init -f

    执行后可以看到在该文件下多了一个叫package.json的配置文件,先不用管(后面也没管过),接下来继续安装模块的操作

   刚开始我是安装的socket.io,后来发现小程序根本用不了,所以这里也不说socket.io了。我们这里用ws

    安装ws命令:npm install --save ws(卸载模块命令:npm uninstall  模块名字)

3.安装好模块后,在你目录下创建一个.js文件,我这是一个ws.js

我这里肯定会比你们的文件要多,不用在意。

使用node.js实现微信小程序实时聊天功能

然后打开这个.js文件,开始编辑你的服务端代码,这个随便你用记事本还是其他什么软件

这是最简单基础的一个打开连接,响应的代码:

//引入ws模块
const WebSocket = require('ws');
//创建服务 port是端口
const wss = new WebSocket.Server({ port: 80});
//客户端连接时会进这个
wss.on('connection', function connection(ws) {
  console.log('连接成功');
  //客户端发送消息时会触发这个
  ws.on('message', function incoming(data) {
    console.log('收到消息');
    //data是客户端发送的消息,这里clients.foreach是广播给所有客户端
    wss.clients.forEach(function each(client) {
      //把客户端发来的data,循环发给每个客户端
      client.send(data);
    });
  });
});

这里贴上稍微比较完善的代码,这里是用数据库保存的发送的消息,用的mysql,所以需要在安装mysql模块

npm install --save mysql

代码:

 这里有很多注释的代码,都是我鼓捣时用到的,可以无视或删掉

 这个MySQL的数据连接需要根据自己的修改,表也是

 我这用到的表就两个字段 id ,msg

var http=require('http');
var qs = require('querystring'); //
var ws=require('ws');
var server=http.createServer(function (req, res) {
  res.end("This is a WebSockets server!");
});
var url = require('url');
//验证函数
function ClientVerify(info) {
  var ret = false;//拒绝
  //url参数
  var params = url.parse(info.req.url, true).query;
  //console.log(groupid);
  //groupid=params['groupid']
  //谁谁谁来到了讨论组
  // wss.clients.forEach(function each(client) {
  //   client.send('233');
  // });
  return true;
}
var wss = new ws.Server( { server: server,verifyClient: ClientVerify } );
/*//引入数据库
 var mysql = require('mysql');
 //连接数据库信息 普通版
 var connection = mysql.createConnection({
  host : '58.87.94.16',
  user : 'root',
  password : 'root',
  database : 'bootdo'
});*/
//引入数据库
var mysql = require('mysql');
// 创建数据池
const pool = mysql.createPool({
  host   : '58.87.94.16',  // 数据库地址
  user   : 'root',  // 数据库用户
  password : 'root',  // 数据库密码
  database : 'bootdo' // 选中数据库
})
/*接收一个sql语句 以及所需的values
这里接收第二参数values的原因是可以使用mysql的占位符 '?'
比如 query(`select * from my_database where id = ?`, [1])
好像可以直接使用pool.query,暂时不明*/
let query = function(sql,values,callback){
  pool.getConnection(function(err,conn){
    if(err){
      callback(err,null,null);
    }else{
      conn.query(sql,values,function(err,results,fields){
        //释放连接
        conn.release();
        //事件驱动回调
        callback(err,results,fields);
      });
    }
  });
};
module.exports=query;
wss.on('connection', function connection(ws) {
  console.log('链接成功!');
  //console.log(ws);
  //查询历史聊天记录 广播给连接的客户端
  var sql='select * from hi_test where groupid=1';
  console.log('sql语句',sql);
  query(sql,function (err,res,fields) {
    console.log('sql操作返回:', res);
    if(res!=null){
      ws.send(JSON.stringify(res));
    }
  });
  //监听客户端发送得消息
  ws.on('message', function incoming(data) {
    console.log('来自客户端得message:',data);
    //保存客户端发送得消息到数据库
    sql="insert into hi_test(msg) values(?)";
    console.log('sql语句',sql);
    query(sql,data,function (err,res,fields) {
      console.log('sql操作返回:',res);//res.insertId
    });
    var sendData=JSON.stringify([{msg:data}])
    /**
     * 把消息发送到所有的客户端
     * wss.clients获取所有链接的客户端
     */
    wss.clients.forEach(function each(client) {
      client.send(sendData);
    });
  });
});
server.listen(80, function listening() {
  console.log('服务器启动成功!');
});
/*发起get请求
var options = {
  hostname: 'www.tjjxsoft.cn',
  path: '/attendanceParameter/getAttendanceParameter/13',
  method: 'GET'
};
var req = http.request(options, function (res) {
  console.log('状态: ' + res.statusCode);
  res.on('data', function (chunk) {
    console.log('返回数据: ' + chunk);
  });
});
req.on('error', function (e) {
  console.log('problem with request: ' + e.message);
});
req.end();*/
/*
/!*构建http服务*!/
var app = require('http').createServer()
/!*引入socket.io*!/
var io = require('socket.io')(app);
/!*定义监听端口,可以自定义,端口不要被占用*!/
var PORT = 80;
/!*监听端口*!/
app.listen(PORT);
/!*定义用户数组*!/
var users = [];
/!**
 *监听客户端连接
 *io是我们定义的服务端的socket
 *回调函数里面的socket是本次连接的客户端socket
 *io与socket是一对多的关系
 *!/
io.on('connection', function (socket) {
  /!*所有的监听on,与发送emit都得写在连接里面,包括断开连接*!/
  socket.on('login',function(data){
    console.log('有人登录了:')
    console.log(data);
    users.push({
      username:data.username
    });
    /!*向所有连接的客户端广播add事件*!/
    io.sockets.emit('add',data)
  })
})
console.log('app listen at'+PORT);*/

然后命令行输入node ws.js(你自己的文件名)回车,就已经启动了服务

使用node.js实现微信小程序实时聊天功能

4.现在服务就已经起来了,接下来弄小程序这边的

 直接贴代码:

wxml:

<view class='homeView'>
  <scroll-view scroll-y style="height:500px;" scroll-top='{{scrolltop}}'>
    <view class='listView'>
      <block wx:for="{{serverMsg}}" wx:key='*this'>
        <!-- -->
        <view wx:if="{{item.user.id!=userInfo.userId}}" class='leftView'>
          <view class='name'>{{item.user.name}}</view>
          <view class='imgmsgleft'>
            <view>
            <!-- 我这用的是自己另一个服务的图片 -->
              <image class='touimg' src='https://www.tjjxsoft.cn/static/images/img005.png'></image>
            </view>
            <view>{{item.msg}}</view>
          </view>
        </view>
        <view wx:else class='rightView'>
          <view class='name'>{{item.user.name}}</view>
          <view class='imgmsg'>
            <view>{{item.msg}}</view>
            <view>
            <!-- 我这用的是自己另一个服务的图片 -->
              <image class='touimg' src='https://www.tjjxsoft.cn/static/images/img005.png'></image>
            </view>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  <view class='sendView'>
    <input bindinput='sendTextBind' placeholder="输入聊天内容" value='{{sendText}}' />
    <button bindtap='sendBtn' type="primary">发送</button>
  </view>
</view>

js:

var app = getApp();
Page({
  data: {
    socket_open: false,//判断连接是否打开
    sendText: "",//发送的消息
    serverMsg: [],//接受的服务端的消息
    userInfo: { userId: 1, name: "呵呵",img:'头像'},//app.appData.userInfo,
    scrolltop: 999
  },
  /**输入内容 */
  sendTextBind: function(e) {
    this.setData({
      sendText: e.detail.value
    });
    console.log(this.data.sendText);
  },
  /**发送消息 */
  sendBtn: function(e) {
    console.log('发送消息事件!');
    var msgJson = {
      user: {
        id: this.data.userInfo.userId,//app.appData.userInfo.userId, //唯一ID区分身份
        name: this.data.userInfo.name, //显示用姓名
        img: this.data.userInfo.img, //显示用头像
      },
      msg: this.data.sendText,//发送的消息
      groupid:1
    }
    //发送消息
    this.send_socket_message(JSON.stringify(msgJson));
    this.setData({
      sendText: ""//发送消息后,清空文本框
    });
  },
  onLoad: function(options) {
    // app.login();
    // this.setData({
    //   userInfo: app.appData.userInfo
    // });
    //初始化
    this.wssInit();
  },
  wssInit() {
    var that = this;
    //建立连接
    wx.connectSocket({
      url: 'ws://localhost'//app.appData.socket
    })
    //监听WebSocket连接打开事件。
    wx.onSocketOpen(function(res) {
      console.log('WebSocket连接已打开!');
      that.setData({
        socket_open: true
      });
    });
    //监听WebSocket接受到服务器的消息事件。
    wx.onSocketMessage(function(res) {
      console.log('收到服务器内容:', res);
      var server_msg = JSON.parse(res.data);
      console.log(server_msg);
      if (server_msg != null) {
        var msgnew = [];
        for (var i = 0; i < server_msg.length; i++) {
          msgnew.push(JSON.parse(server_msg[i].msg));
        }
        msgnew=that.data.serverMsg.concat(msgnew);
        that.setData({
          serverMsg: msgnew,
          scrolltop: msgnew.length * 100
        });
        console.log(that.data.serverMsg);
      }
    });
    //监听WebSocket错误。
    wx.onSocketError(function(res) {
      console.log('WebSocket连接打开失败,请检查!', res)
    });
  },
  send_socket_message: function(msg) {
    //socket_open,连接打开的回调后才会为true,然后才能发送消息
    if (this.data.socket_open) {
      wx.sendSocketMessage({
        data: msg
      })
    }
  }
})

wxss:

.homeView {
  border-top: 1px solid #ededed;
}
.listView{
  padding-bottom: 50px;
}
.listView>view {
  padding: 10px;
}
.rightView {
  text-align: right;
}
.imgmsgleft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.imgmsgleft>view:last-child {
  border: solid 1px gray;
  padding: 10px;
  border-radius: 6px;
}
.imgmsg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.imgmsg>view:first-child {
  border: solid 1px gray;
  padding: 10px;
  border-radius: 6px;
  background-color: green;
}
.touimg {
  width: 50px;
  height: 50px;
}
.name {
  font-size: 14px;
  color: gray;
}
.sendView {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0px;
  border-top: 1px #ededed solid;
  background-color: white;
}
.sendView>button {
  width: 20%;
}
.sendView>input {
  width: 80%;
  height: auto;
}

效果图:

使用node.js实现微信小程序实时聊天功能

预览的时候一定要打开调试,因为这不是WSS协议,是没法直接用的、

总结

以上所述是小编给大家介绍的使用node.js实现微信小程序实时聊天功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
收集json解析的四种方法分享
Jan 17 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
javascript生成随机数的方法
May 16 Javascript
jquery validate demo 基础
Oct 29 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 #Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 #Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 #Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 #Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 #Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 #Javascript
You might like
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP解析RSS的方法
2015/03/05 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
django之跨表查询及添加记录的示例代码
2018/10/16 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
如何给Python代码进行加密
2020/01/10 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
文员个人求职自荐信
2013/09/21 职场文书
销售总监工作职责
2013/11/21 职场文书
社区活动邀请函范文
2014/01/29 职场文书
小学教师师德感言
2014/02/10 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
yy司仪主持词
2014/03/22 职场文书
生日庆典策划方案
2014/06/02 职场文书
语文复习计划
2015/01/19 职场文书
开会通知
2015/04/20 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL