微信小程序 Websocket详解

一、WebSocket 概述

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 可以在浏览器和服务器之间建立实时的双向通信，相比传统的 HTTP，有更低的延迟和更高的效率。

WebSocket 在建立连接时，需要进行握手协议，握手过程的 header 信息显示 WebSocket 支持的协议。客户端请求建立 WebSocket 连接时，请求头部包含了 Upgrade 和 Connection，服务器端返回的头部信息中也包含了 Upgrade 和 Connection。

客户端和服务器端使用一致的 WebSocket 生命周期管理，通信效率高，性能优越，操作简单。

二、WebSocket 在小程序中的应用

在小程序开发中，可以利用微信开发者工具提供的模拟 websocket 功能完成初步的开发，同时在实际项目中需要使用到后端接口的支持，可以使用 Springboot 及 WebSocket 包括STOMP的技术。

使用微信小程序中的 WebSocket，在前端中通过JS提供的 WebSocket 接口来建立 WebSocket 连接，并通过 WebSocket 接口提供的方法向服务器发送消息或者接收服务器下发的消息。使用 WebSocket 接口发送消息时，调用 send() 方法，使用 onmessage() 方法接收消息。

三、示例代码

前端代码

var socketOpen = false 
var socketMsgQueue = [] 
const URL = 'wss://xxx.xxx.xxx.xxx:xxxx' //WebSocket 地址

wx.connectSocket({
  url: URL,
  success: function () {
    console.log('WebSocket连接成功')
  },
  fail: function () {
    console.log('WebSocket连接失败')
  }
})

wx.onSocketOpen(function (res) {
  console.log('WebSocket连接已打开！')
  socketOpen = true 
  for (var i = 0; i < socketMsgQueue.length; i++) {
    sendSocketMessage(socketMsgQueue[i])
  }
  socketMsgQueue = []
})

wx.onSocketMessage(function (res) {
  console.log('收到服务器内容：' + res.data)
})

wx.onSocketClose(function (res) {
  console.log('WebSocket 已关闭！')
  socketOpen = false
})

function sendSocketMessage(msg) {
  if (socketOpen) {
    wx.sendSocketMessage({
      data: msg
    })
  } else {
    socketMsgQueue.push(msg)
  }
}

后端WebSocket配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Autowired
    private WebSocketInterceptor webSocketInterceptor;

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                .setAllowedOrigins("*")
                .addInterceptors(webSocketInterceptor)
                .withSockJS();
    }

}

四、小结

本文就微信小程序 WebSocket 进行了详细的讲解，并提供了相关的示例代码。WebSocket 大大提升了前后端通信效率和性能，对于实时性要求较高的页面和应用，可以使用 WebSocket 协议。