小程序中的webSocket介绍以及使用

什么是 webStoket?

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

通信原理

当客户端要和服务端建立 WebSocket 连接时，在客户端和服务器的握手过程中，客户端首先会向服务端发送一个 HTTP 请求，包含一个 Upgrade 请求头来告知服务端客户端想要建立一个 WebSocket 连接。

创建

首先创建一个空文件夹 ,里面创建一个 JS 文件,在文件夹中打开 cmd,输入命令:

npm i
npm i ws

在 js文件中编写

引入

// webSocket/index.js

// 首先引入webSocket,创建一个服务器
let Ws = require("ws").Server;
// 设置端口号
let wss = new Ws({
  port: 8282
})

建立连接并接收

// 监听是否有连接 接入
wss.on("connection", function (ws) {
  console.log("有连接");
  // 前端发过来的消息
  ws.on("message", res => {
    console.log(JSON.parse(res));
    // 发送数据
    ws.send(JSON.stringify({ name: "张三" }));
  })
});

运行

在 cmd中输入命令 运行

nodemon index

小程序中使用

wxml文件中绑定个点击事件

<view>
  <button type="primary" bindtap="sendMessage">点击发送消息</button>
</view>

js文件

创建一个ws连接

// pages/text/text.js
wx.connectSocket({
    url: 'ws://localhost:8282',
})

在cmd中可以看到 webSocket 中的消息连接成功了

监听是否连接

wx.onSocketOpen((result) => {
  console.log("连接成功");
})

在 小程序调试器中可以看到输出内容证明连接成功

绑定的点击事件

sendMessage(){
    wx.sendSocketMessage({
      data: "some value...",
  })
}

监听收到的消息

wx.onSocketMessage((result) => {
  console.log(result);
})

总结

客户端和服务器端的 WebSocket 连接就建立起来，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。总的来说 ,webSocket 是应用层协议。