SpringBoot + Vue + WebSocket简单用法

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

1、引入Maven依赖 pom.xml

// 如果本地依赖存在但是报红，加上版本号
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2、配置类 WebSocketConfig.java

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

3、处理类 WebSocketController.java

@Component
@ServerEndpoint("/webSocket/{userCode}")
public class WebSocketController {

    private static final Log logger = LogFactory.getLog(WebSocketController.class);

    private static ConcurrentHashMap<String, Session> userInfoMap = new ConcurrentHashMap<>();
    private static int onlineCount = 0;

    /**
     * 发送消息
     * @param userCode
     * @param message
     */
    @OnMessage
    public void onMessage(@PathParam("userCode") String userCode, String message) {
        try {
            // 向指定用户发送消息
            userInfoMap.get(userCode).getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 建立连接调用的方法
     * @param session
     * @param userCode
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userCode") String userCode) {
        userInfoMap.put(userCode, session);
        onlineCount = userInfoMap.size();
        logger.info("建立连接成功，当前人数为" + onlineCount);
        String message = "建立连接成功，当前人数为" + onlineCount;
        onMessage(userCode, message);
    }
    
    /**
     * 关闭链接调用接口
     * @param userCode
     */
    @OnClose
    public void onClose(@PathParam("userCode") String userCode) {
        userInfoMap.remove(userCode);
        onlineCount = userInfoMap.size();
        logger.info("断开连接成功，当前人数为" + onlineCount);
    }

}

4、Vue

mounted () {
    this.initWebSocket()
},
destroyed () {
    this.webSocketClose()
},
methods: {
    initWebSocket () {
        console.log('initWebSocket方法')
        // 根据自己的方法获取userCode
        let userCode = sessionStorage.getItem('userCode')
        // WebSocket地址为接口地址，http用ws、https用wws
        // var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws"
        this.websocket = new WebSocket('ws://localhost:8580/webSocket/' + userCode)
        this.websocket.onopen = this.webSocketOpen
        this.websocket.onerror = this.webSocketError
        this.websocket.onmessage = this.webSocketMessage
        this.websocket.onclose = this.webSocketClose
    },
    webSocketOpen () {
        console.log('WebSocket连接成功')
    },
    webSocketError () {
        console.log('WebSocket连接错误')
    },
    webSocketMessage (e) {
        // 接收服务器返回的数据
        console.log('服务器返回的消息', e.data)
    },
    webSocketClose (e) {
        console.log('WebSocket连接断开', e)
    }
}