微信小程序-网络API WebSocket详解

简介

现今的移动应用开发中，前后端分离已经成为一个显然的趋势。在这样的情况下，和后端交互，获取数据已经成为了一个移动应用开发的基本需求。所以，在大多数的应用中，都需要用到网络请求。其中，Websocket是网络请求的一种。

Websocket是什么？

说白了，Websocket就是一个协议，一种在web浏览器和服务器之间进行实时、双向、持久的通信协议。

支持Websocket的浏览器，和不支持Websocket的浏览器相比，性能更好并且卡顿更少。

Websocket如何使用?

如果你是一名有wx.request经验的开发者，相信您只需要稍作学习便可以掌握Websocket的使用。

创建WebSocket

下面的代码演示了如何创建websocket，在这里我将创建一个WebSocket，它连接到我们的服务器 wss://example.com/ .

wx.connectSocket({
  url: 'wss://example.com/',
  header:{
      'content-type':'application/json'
  },
});

监听websocket连接打开

当我们创建一个WebSocket连接到服务器时，服务器可以决定立即向我们发送一些数据。如果我们打算执行任何操作，需要先监听websocket连接已成功打开事件，如下：

wx.onSocketOpen(function(res) {
  console.log('WebSocket连接已打开！')
});

WebSocket对象的属性和方法

如果我们想要发送一些数据或者管理WebSocket的状态或属性，我们需要操作WebSocket对象。

一下是WebSocket对象的属性和方法

WebSocket属性

• readyState: 只读的unsigned short类型的属性。当连接还没有实现时它的值等于0（表示正在连接），当连接开启时值等于1（表示连接已经建立并且可以通讯），当连接正在关闭时值等于2（表示连接正在关闭），当连接已经关闭时值等于3（表示连接已经关闭或不可用）。

WebSocket方法

• send(): 用于向服务器发送数据。
• close(): 关闭连接。
• onopen:当连接成功打开后所要执行的函数。
• onmessage:当接收到服务器数据后所要执行的函数。
• onerror:当传输出现错误时所要执行的函数
• onclose:当连接关闭时所要执行的函数。

下面是一个WebSocket对象处理收/发消息的样例：

wx.connectSocket({
  url: 'wss://example.com/',
  success:function(){
    console.log('信道连接成功~');
  }
});
wx.onSocketOpen(function(res) {
  console.log('WebSocket连接已打开！');
  wx.sendSocketMessage({
    data: 'user:小白'
  });
});
wx.onSocketMessage(function(res) {
  console.log('收到服务器内容：' + res.data)
  wx.closeSocket();
});
wx.onSocketClose(function(res) {
  console.log('WebSocket 已关闭！')
});
wx.onSocketError(function(res){
  console.log('Websocket连接失败~')
});

示例

下面是两个简单实例：一个客户端和一个服务端示例。

客户端

我们将创建一个简单的微信小程序客户端。当客户端与服务端建立Websocket连接后，客户端将向服务器发送一些数据，并等待服务器响应。

客户端示例代码：

wx.connectSocket({
  url: 'wss://example.com/',
  success:function(){
    console.log('Websocket连接成功！');
  }
});
wx.onSocketOpen(function(res){
  console.log('Websocket已打开！');
  wx.sendSocketMessage({
     data: 'Hello World！'
  });
});
wx.onSocketMessage(function(res){
  console.log('收到服务器内容：' + res.data)
  wx.closeSocket();
});
wx.onSocketClose(function(res){
  console.log('WebSocket已关闭！');
});

服务端

我们将使用 Node.js 和 Ws 模块创建一个简单的服务器，用于接收客户端发送的数据，并响应相同的数据。

服务端示例代码：

var WebSocketServer = require('ws').Server;
var server = new WebSocketServer({port: 8080});
console.log('服务器正在运行...');

server.on('connection', function(ws) {  
  ws.on('message', function(data) {
    console.log('收到来自客户端的数据：' + JSON.parse(data));
    ws.send('服务器正在响应数据：' + data);
  });
});

客户端和服务端通信示意图：

                          +-+-+-+-+-+
                       /  |         |
                    /     |         |
                 /        | Server  |
    +--------+           |         |
    |        |<- - - - - |- - - - - |
    | Client |           +-+-+-+-+-+
    |        |<- - - - - |                   服务端响应
    +--------+           |                   服务器正在响应数据：Hello World！
                         |

结论

在现今的移动应用开发过程中，Websocket已经成为了很重要的一部分。在本文中，我们介绍了如何在微信小程序中使用Websocket API。我希望这篇文章对您有所帮助，谢谢您的观看！