使用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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
Javascript变量作用域详解
Dec 06 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php以post形式发送xml的方法
2014/11/04 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
opencv python如何实现图像二值化
2020/02/03 Python
python3 简单实现组合设计模式
2020/07/02 Python
Python如何测试stdout输出
2020/08/10 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
Python类class参数self原理解析
2020/11/19 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
学期研究性学习个人的自我评价
2014/01/09 职场文书
联谊活动策划书
2014/01/26 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
教师个人事迹材料
2014/12/17 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
心理学培训心得体会
2016/01/22 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android