node.js来实现微信小程序实时聊天功能（附代码）

本篇文章给大家带来的内容是关于如何使用node.js来实现微信小程序实时聊天功能（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

我对IM这块可谓是真正的小白，所以没接触过的可以来参考参考。
在微信这个聊天工具里的小程序上实现聊天功能，总感觉怪怪的。但领导要求了，总是要干的。

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

最后确定了第一步需要干的是用的node.js搭建服务（我是装在自己的窗口下的）：

1.首先到官网下载node.js，连接：https：
//nodejs.org/en/安装很简单，双击下载好的文件，直接下一步一步，没什么特殊的选择，路径默认就好
可以打开命令行窗口输入节点-v会输出版本，来检验是否安装成功，其实这个也没什么必要
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;}

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

相关推荐：

使用CSS3仿微信聊天小气泡的实例介绍

使用图灵api创建微信聊天机器人，api聊天机器人_PHP教程

实现微信UI的聊天功能