微信小程序 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 協議。