使用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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
vuex实现数据状态持久化
Nov 11 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
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
初始Nodejs
2014/11/08 NodeJs
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python random模块常用方法
2014/11/03 Python
python计算N天之后日期的方法
2015/03/31 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python内建数据结构详解
2016/02/03 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
对Python中range()函数和list的比较
2018/04/19 Python
python实现静态web服务器
2019/09/03 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
类如何去实现接口
2013/12/19 面试题
酒店总经理工作职责
2013/12/13 职场文书
迎接领导欢迎词
2014/01/11 职场文书
一年级学生期末评语
2014/04/21 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年档案室工作总结
2015/05/23 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP