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

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协议，是没法直接用的、

总结

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