当前位置：首页 > news >正文

微信小程序 WebSocket 通信 —— 在线聊天

news 2025/6/27 5:51:48

在Node栏目就讲到了Socket通信的内容，使用Node实现Socke通信，还使用两个流行的WebSocket 库，ws 和 socket.io，在小程序中的WebSocket接口和HTML5的WebSocket基本相同，可以实现浏览器与服务器之间的全双工通信。那么本篇就来讲关于微信小程序实现WebSocket通信完成在线聊天。

客户端流程

这里的客户端也就是微信小程序了，同时还需要使用Node搭载一个服务器，WebSocket 是客服端与服务器之间专门建立的一条通道，先来了解一下过程：

通过 wx.connectSocket 来创建 WebSocket 连接，来连接搭载好的Node服务器，连接之后发送数据可以通过 wx.sendSocketMessage ，可以发送数据到达客户端，同时也需要监听接收来自客户端发出的消息事件可以使用 wx.onSocketMessage ，知道这个流程之后，来看一下服务器的搭载流程。

服务器流程

使用Node搭载服务器，WebSocket 服务是建立在HTTP之上的，可以通过引入 http 模块，使用 http.createServer() 创建 HTTP服务器，安装WebSocket库，当然这里可以使用Node中net模块，这里附上可供你参考的篇目：

通过 WebSocket库来创建 WebSocket服务器，同时还需要设置 autoAcceptConnections ，对客服端发送的数据进行一个监控，以及关闭连接的监控，此外还可以进行其他的监控像错误，以及控制台的输入等操作。

图解

用一个图来简单概述一下：

下面来使用WebSokcet通信实现在线聊天，那先来看看需要完成的效果内容：

以上就是接下来要完成的一个场景，先从小程序入手：

1. 聊天界面编写

编写小程序的聊天界面，这里也不再多讲，主要还是讲一下注意点，聊天的数据不可能是一条两条，所以它应该是一个scroll-view滚动的，底部的输入框是固定在底部的，同时要避免底部会把最后的消息数据给遮挡了，聊天数据可以数组保存，然后通过wx:for渲染，是左边的还是右边发出的数据可以通过wx:if来进行判断显示左边还是右边，不破坏原型的DOM结构可以用block标签。

<!--pages/wxchat/wxchat.wxml--><!-- 聊天信息 -->
<view class="content"><scroll-view class="content-info" scroll-y scroll-top="{{scrollTop}}"><view class="content-list"><view class="content-li" wx:for="{{infoList}}" wx:key="id"> <!-- 右边 --><block wx:if="{{item.role === 'self'}}"><view class="right-info"><image class="myhead" src="{{head.self}}"></image><text class="myinfo">{{item.content}}</text></view></block><!-- 左边 --><block wx:else><view class="left-info"><image class="myhead" src="{{head.server}}"></image><text class="myinfo">{{item.content}}</text></view></block></view></view></scroll-view>
</view><!-- 操作区 -->
<view class="foot-input"><input type="text" class="send-input" placeholder="请输入聊天内容..." value="{{message}}" bindinput="handleChange"/><view class="send-btn" bindtap="handleSend">发送</view>
</view>

/* pages/wxchat/wxchat.wxss */
page{height: 100%;
}
.content{height: 100%;display: flex;
}
.content-info .content-list{margin-bottom: 88rpx;
}
/* 信息 */
.content .content-info .content-list .content-li{clear: both;overflow: hidden;
}
.left-info{clear: both;margin: 20rpx 20rpx;
}
.left-info .myhead{float: left;width: 88rpx;height: 88rpx;/* background:#efefef; */
}
.left-info .myinfo{display: block;float: left;background: #75c475;max-width: 490rpx;margin-top: 10rpx;margin-left: 20rpx;padding: 10rpx 18rpx;border-radius: 20rpx;
}
.left-info::after{content:'';clear: both;display: block;height: 0;visibility: hidden;
}
.right-info{clear: both;margin: 10rpx 20rpx;
}
.right-info .myinfo{display: block;float: right;background: #efefef;max-width: 490rpx;margin-top: 10rpx;margin-right: 20rpx;padding: 10rpx 18rpx;border-radius: 20rpx;
}
.right-info .myhead{float: right;width: 88rpx;height: 88rpx;/* background-color: #efefef; */
}
.right-info::after{content:'';clear: both;display: block;height: 0;visibility: hidden;
}/* 底部 */
.foot-input{position: fixed;bottom: 0;border-top: 1px solid #DDDDDD;width: 750rpx;height: 88rpx;line-height: 88rpx;background: #ffffff;
}
.foot-input .send-input{float: left;width: 560rpx;max-width: 600rpx;margin: 16rpx 0 0 20rpx;padding: 0 10rpx;
}
.foot-input .send-btn{float: right;margin: 11rpx 20rpx 0 0;width: 120rpx;height: 66rpx;line-height: 66rpx;text-align: center;background: #16AA51;color: #ffffff;border-radius: 10rpx;
}

2. 小程序创建服务器连接

小程序要接入WebSocketServer服务器，首先要创建服务器连接，可以通过wx.connectSocket() 方法来创建连接，在小程序初始加载的时候就可以进行，同时还可以使用 wx.showToast() 方法提示接入成功与否；

/* pages/wxchat/wxchat.js*/
Page({onLoad:function(){this.createSocketServer();},// 创建服务器连接createSocketServer(){// 服务器地址开头 ws/wss url: 'ws://127.0.0.1:3000'}// 监控接入与否wx.onSocketOpen(()=>{// 接入成功wx.showToast({title: 'Socket接入成功',icon: 'success' })// 接入问候语})// 监控信息 - 待写// wx.onSocketMessage(()=>{ ... })// 监控关闭wx.onSocketClose(()=>{// 服务器Socket连接关闭wx.showToast({title: 'Socket已关闭'icon: 'error'})})// 监控错误wx.onSocketError((err)=>{console.log('接入异常',err);})})

3. 搭载Node服务器 - WebSocket服务器

搭载Node服务器，WebSocket服务是建立在HTTP上，所以需要先引用http模块创建HTTP服务器再创建WebSocket服务器，在这里使用第三方的websocket库。

# 初始化 —— 在创建好的目标目录下进行初始化

npm init -y

# 使用npm 安装 websocket 库

npm i websocket

# [可选] 使用 npm 安装 nodemon

npm i nodemon

* 不安装运行index.js文件使用每次修改后要执行 —— node index.js

* 安装运行index.js文件使用每次修改不需要手动执行

# 使用 npm 安装 moment.js —— 格式化时间

npm i moment -S

# 创建 index.js 文件进行编写代码

/* 服务器index.js文件 */ const http = require('http');
const WebSocketServer = require('websocket').server;
const moment = require('moment')// 创建HTTP服务器
const httpServer = http.createServer((req,res)=>{res.writeHead(404);res.end();
})// 创建websocket服务器
const wsServer = new WebSocketServer({httpServer,autoAcceptConnections : true    // 自动接受连接
})// 监控接入
wsServer.on('connect',(connection)=>{// 监控数据信息messageconnection.on('message',(msg)=>{console.log('>> message' , msg);if( msg.type === 'utf8' ){var data = {content : '[自动回复] : 请等待用户接入回复...',date : moment(new Date()).format('YYYY-D-M , h:mm a')}connection.sendUTF( JSON.stringify(data) )}})// 监控关闭connection.on('close',()=>{console.log('Socket服务关闭');})})// 监听 3000 端口
httpServer.listen('3000',()=>{console.log('SERVER RUNNING ...')
})

4. 客户端发送数据信息

在input输入框中输入数据信息，通过在input框中绑定bindinput来监听获取输入框中的数据，将input框的value = {{ message }} ，便于做清空数据框操作。在点击"发送"按钮时将input中获取的信息通过sendSocketMessage 发送到服务器。

!--pages/wxchat/wxchat.js-->
Page({data:{head:{self:'https://profile.csdnimg.cn/8/D/A/2_weixin_52203618',server:'https://img2.baidu.com/it/u=4237756909,3713889849&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'},},onLoad:function(){this.createSocketServer()},// 创建服务器连接createSocketServer(){...},message:'',   // 待接收发送的消息// 获取Input框内的数据handleChange(opt){this.message = opt.detail.value}// 发送按钮触发事件handleSend(){// 发送的内容不为空if(this.message){// 发送wx.sendSocketMessage({data : this.message})// 收集我发出的信息 - 待写}else{wx.showToast({title: '请输入聊天内容',icon: 'none',duration: 1000})}}
})

5. 收集发送的数据信息

通过wx.sendSocketMessage()将内容发送出去，需要将内容进行一个收集，收集到一个数组当中去，然后在页面通过wx:for的渲染方式显示出来，下面是对发送的数据信息进行收集：

<!--pages/wxchat/wxchat.js-->
Page({data:{head:{ ... },    // 用户头像infoList:[]      // 待收集数据信息},onLoad:function(){ ... },message: '',   // 待发送的数据信息id: 0,         // 数据信息标识// 发送按钮触发事件handleSend(){if(this.message){ wx.sendSocketMessage({ data: this.message })// 收集我发出的信息var list = this.data.infoListlist.push({id: this.id++ ,content: this.message ,role: 'self'    // 标识 —— 客户端发出 })// 更新this.setData({infoList : listmessage : ''    // 清空输入框})// 聊天视角 - 待写}else{wx.showToast({title: '请输入聊天内容',icon: 'none',duration: 1000})}} 
})

6. 接入服务器问候语

接入服务器之后，客户端会自动发送 "你好" 的问候语；那么message是待发送的数据信息，监控客户端接入服务器的时候可以为message进行赋值，再调用handSend()方法发送，当然你可以调整一下handSend()方法，将其作为参数，这里就不做调整了，那么此时message绑定在input框的value值上，需要对message进行清空，否则当你再次点击发送的时候，没有输入任何数据也会发送 "你好" 的数据信息；

Page({data:{ ... },onLoad:function(){ this.createSocketServer() },// 创建服务器连接createSocketServer(){wx.connectSocket({ url: 'ws://127.0.0.1:3000/' })// 监控接入wx.onSocketOpen(() => {wx.showToast({title: 'Socket接入成功',icon: 'success'})    // 接入问候语this.message = '你好'this.handleSend()this.message = ''})...}
})

7. 服务器发送数据信息到客户端

客户端发送的数据信息在服务器中通过数据的监控可以知道，在前面已经编写了这段：

wsServer.on('connect',(connection)=>{// 监控是否有message信息connection.on('message',(msg)=>{console.log('>> message' , msg);if( msg.type === 'utf8'){        var data = {content: '[自动回复] : 请等待用户接入回复...',date: moment(new Date()).format('YYYY-D-M , h:mm a')}connection.sendUTF( JSON.stringify(data) )}})
})

接下来是在服务器进行发送数据到客户端，那么服务器可以通过在控制台的输入发送到客户端，监控控制台的输入进行获取通过sendUTF发送到客户端。

/* 服务器index.js文件 */ ...
wsServer.on('connect',(connection)=>{// 监控是否有message信息    connection.on('message',(msg)=>{ ... })    // 监控关闭connection.on('close',()=>{ ... })// 监控控制台输入process.stdin.on('data',(data)=>{var data = data.toString().trim()   // 清除前后空格data = {content : data,date : moment(new Date()).format('YYYY-D-M , h:mm a')}connection.sendUTF(JSON.stringify(data));    // 发送})
})
...

服务器发送数据信息到客户端，那么需要在客户端进行监控数据信息

8. 客户端监控收集服务端发来的数据信息

服务器发来的数据信息，在小程序客户端上需要对其进行一个数据信息的监控，同时还需要将这些数据信息使用数组收集起来，在页面使用wx:for渲染交互信息。

<!--pages/wxchat/wxchat.js-->
Page({data:{ ... },onLoad:function(){ ... },message: '',   // 待发送的数据信息id: 0,         // 数据信息标识createSocketServer(){// 创建服务器连接 wx.connectSocket({url: 'ws://127.0.0.1:3000/'})// 监控接入wx.onSocketOpen(()=>{ ... })// 监控信息wx.onSocketMessage((msg)=>{var result = JSON.parse(msg.data);result.id = this.id++ result.role = 'Server'    // 标识 —— 服务端发出 // 收集var list = this.data.infoListlist.push(result)// 更新this.setData({infoList : list})// 聊天视角 - 待写})}
})

9 .定位到消息处 —— 聊天视角

能够在页面上正常的渲染客户端和服务器所发出的数据信息，接下来需要处理聊天视角的问题，聊天界面的聊天数据随着发送的增多会是聊天界面出现滑动状态 scroll-view ，那么当超出的聊天数据信息就需要定位到最底部发出消息的视角，不需要手动的向下滑动到发送数据信息的位置。通过 scroll-view 的标签中的scroll-top属性，同时要对每一个发送数据信息的内容高度进行计算，然后进行定位，那么可以对渲染的每一个 content-li 的高度进行计算。

<!--pages/wxchat/wxchat.js-->
Page({data: { ...scrolltop: 0  // 默认滑动定位},onLoad:function(){ ... }message: '',   // 待发送的数据信息id: 0,         // 数据信息标识createSocketServer(){// 创建连接wx.connectSocket({ ... })// 监控接入wx.onSocketOpen(()=>{ ... })// 监控信息wx.onSocketMessage((msg)=>{...// 聊天视角this.rollingBottom()})},handleChange(opt){ ... },handleSend(){ if(this.message){...// 聊天视角this.rollingBottom()}else{...}},// 聊天视角调整方法rollingBottom(){wx.createSelectorQuery().selectAll('.content-li').boundingClientRect(results=>{                results.forEach(result=>{console.log(result)this.setData({scrollTop : result.bottom})})}).exec()}
})

10 .状态设置优化

当客户端点击发送数据信息，服务器都会返回这个自动回复的内容，显然不友好，需要什么效果呢，就是当服务器不在线状态时，客户端发送什么，服务器仅回复【自动回复】来提示客户端当前不在线，如果服务器在控制台输出作出答复返回给客户端，此时服务器就是在线状态，那么当客户端再次发来的时候，服务器就不再继续返回【自动回复】

/* 服务器index.js文件 - 完整 */ const http = require('http');
const WebSocketServer = require('websocket').server;
const moment = require('moment')// 在线状态
let onLineStatus = false    // 服务器默认不在线// 创建Http服务器
const httpServer = http.createServer((req,res)=>{res.writeHead(404);res.end();
})// 创建ws服务器
const wsSercer = new WebSocketServer({httpServer,autoAcceptConnections : true
})
wsSercer.on('connect',(connection)=>{// 监控是否有message信息connection.on('message',(msg)=>{console.log('>> message',msg)// if( msg.type === 'utf8'){if( msg.type === 'utf8' && !onLineStatus){var data = {content: '[自动回复] : 请等待用户接入回复...',date: moment(new Date()).format('YYYY-D-M , h:mm a')}connection.sendUTF( JSON.stringify(data) )}})// 监控关闭connection.on('close',()=>{console.log('close')})// 接收控制台输入process.stdin.on('data',(data)=>{var data = data.toString().trim()   // 清除前后空格data = {content : data,date : moment(new Date()).format('YYYY-D-M , h:mm a')}connection.sendUTF( JSON.stringify(data) )// 在线状态onLineStatus = true})
})httpServer.listen('3000',()=>{console.log('SERVER RUNNING ...')
})

以上就完成了整个使用WebSocket实现通信的代码，下面来进行测试一下吧效果吧！