一、什么是socket?
网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socke
本章案例中我们使用HTML5中的webSocket。
websocket是HTML5开始提供的一种浏览器与服务器进行双向通讯的网络技术。
使用websocket浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速的通道，两者之间就可以互相传送
好处:
节省资源：互相沟通的Header是很小的 大概是2bytes。
推送信息：不需要客户端请求，服务器可以主动传送数据给客户端
服务端代码
安装ws
cnpm install ws -S
const WebSocket = require(\'ws\'); //创建服务 const wss = new WebSocket.Server({ port: 8080 }); //当用户连接的时候回触发connection wss.on(\'connection\', (client) => { //接收客户端消息 client.on(\'message\', (data) => { //遍历所有用户,将接收到的消息发送给所有的用户 wss.clients.forEach((item) => { if (item.readyState === WebSocket.OPEN) { item.send(data); } }); }); });
客户端代码
相关API
wx.connectSocket:创建一个WebSocket连接
wx.onSocketOpen:监听WebSocket连接打开事件
wx.onSocketMessage:监听WebSocket接受到服务器的消息事件
wx.sendSocketMessage:通过WebSocket连接发送数据。需要先wx.connectSocket，并在wx.onSocketOpen回调之后才能发送
onLoad(){ //链接socket wx.connectSocket({ url: \'ws://192.168.1.9:8080\', header: { \'content-type\': \'application/json\' }, method: "get", success: (data) => { //如果链接成功，则监听 WebSocket 连接打开事件 if (data.errMsg == "connectSocket:ok") { //监听 WebSocket 连接打开事件 this.handleSocketOpen(); } } }) //接收服务端传递到客户端的消息 this.handleSocketMessage(); } //监听 WebSocket 连接打开事件 handleSocketOpen(){ wx.onSocketOpen(() => { //定义状态值，如果为true则表示监听成功 this.flag = true }) }, //接收服务端传递到客户端的消息 handleSocketMessage(){ wx.onSocketMessage((data) => { console.log(data); }) }, //向服务端发送消息 handleSend(e) { //如果监听WebSocket 连接打开事件成功则发送消息 if (this.flag) { wx.sendSocketMessage({ data: this.data.message, success: (data) => { console.log(data, 111); } }) } }
请发表评论