根据上一篇博客: https://www.yuque.com/docs/share/969e27a5-a02c-478a-9af1-87955d61de6b?# 《Springboot 整合 websocket》一文中,简单介绍了springboot 集成原生websocket的方案, 这里在spring集成websocket的基础上, 引入SocketJs库, 封装Websocket.
Springboot 整合SockJs (包装Websocket) - 图1

1. 引入socketJs库

首先, 由于Websocket不支持低版本浏览器(client端), 所以在浏览器端引入SocketJs库. -> socket.html
](https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js">)

2. 修改client 端代码, 即app.js

  1.     //使用socketJs兼容各个版本浏览器
  2.     //ws = new WebSocket('ws://localhost:8080/socket'); //原来建立websocekt的方法
  3.     if('Websocket' in window){
  4.         ws = new WebSocket('ws://localhost:8080/socket');
  5.         console.log("使用normal websocket")
  6.     }else if('MozWebSocket' in window){
  7.         //火狐
  8.         ws = new MozWebSocket('ws://localhost:8080/socket');
  9.     }else{
  10.         //其他不支持websocket的浏览器, 用sockJS兼容
  11.         ws = new SockJS('http://localhost:8080/sockjs');
  12.     }

整段代码就是根据浏览器中有没有原生WebSocket对象, 创建ws对象.
注意: SockJs用的是http或者https协议 (https://github.com/sockjs/sockjs-client)

3. 修改后端Server (springboot) -> WebSocketConfig类

  1. public class WebSocketConfig implements WebSocketConfigurer {
  3.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
  4.         registry.addHandler(new SocketTextHandler(), "/socket");
  5.         registry.addHandler(new SocketTextHandler(), "/sockjs").withSockJS();
  6.     }
  8. }

在原来的

  1. registry.addHandler(new SocketTextHandler(), "/socket");

下多加一句

  1. registry.addHandler(new SocketTextHandler(), "/sockjs").withSockJS();

表示, 用同一个handler, 但是走的是SockJS.

4. 项目代码地址

https://gitee.com/sky_memory/springboot-socket-js.git