在微信这个聊天工具里的小程序上实现聊天功能，总感觉怪怪的。但领导要求了，总是要干的。
然后就实时通讯这个关键词展开搜索，穿梭于网页之间。不过粘贴复制的真的太多了，找了半天也没找到想要的，不过还是提取到了关键词的WebSocket和node.js的，然后搜索这两是啥，什么关系，总算明白了一点。
最后确定了第一步需要干的是用node.js搭建服务（我是装在自己的windows下的）：
1.首先到官网下载node.js，下载链接
安装很简单，双击下载好的文件，直接下一步一步，没什么特殊的选择，路径默认就好
可以打开命令行窗口输入 node -v会输出版本，来检验是否安装成功，其实这个也没什么必要
2.然后新建一个文件夹（我的node.js是安装在Ç盘的，然后再d盘下新建了个叫webSocket的文件夹）
然后用命令转到该目录下：在这个文件下安装我们要使用的模块：安装模块前需要先生成一个配置文件，不然会报错（反正我报了）
执行后可以看到在该文件下多了一个叫package.json的配置文件，先不用管（后面也没管过），接下来继续安装模块的操作
刚开始我是安装的socket.io，后来发现小程序根本用不了，所以这里也不说socket.io了。我们这里用ws
安装ws命令：npm install --save ws（卸载模块命令：npm uninstall 模块名字）
3.安装好模块后，在你目录下创建一个.js文件，我这是一个ws.js
我这里肯定会比你们的文件要多，不用在意。
然后打开这个.js文件，开始编辑你的服务端代码，这个随便你用记事本还是其他什么软件
这是最简单基础的一个打开连接，响应的代码：
这里贴上稍微比较完善的代码，这里是用数据库保存的发送的消息，用的MysqL，所以需要在安装MysqL模块
npm install --save MysqL
代码：
这里有很多注释的代码，都是我鼓捣时用到的，可以无视或删掉
我这用到的表就两个字段 id ，msg
函数
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,function(err,results,fields){
//释放连接
conn.release();
//事件驱动回调
callback(err,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,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（你自己的文件名）回车，就已经启动了服务
4.现在服务就已经起来了，接下来弄小程序这边的
直接贴代码：
wxml：
js：
内容 */
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：
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协议，是没法直接用的、
总结
以上所述是小编给大家介绍的使用node.js实现微信小程序实时聊天功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/weapp/31014.html