SpringBoot + Vue实现websocket

后端代码

pom.xml增加依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

增加ServerEndpointExporter Bean

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** @Author zhangyugu* @Date 2022/3/28 5:00 下午* @Version 1.0*/
@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

增加websocket事件的监听器和发送消息工具类 WebSocketHandler，增加该类后SpringBoot服务接收到形如 /ws/xxx 的url请求将进入如下代码逻辑。

import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;import org.springframework.stereotype.Component;import com.baomidou.mybatisplus.core.toolkit.StringUtils;import lombok.extern.slf4j.Slf4j;@Slf4j
@ServerEndpoint(value = "/ws/{token}")
@Component
public class WebSocketHandler {static Map<String, Session> sessions = new HashMap<>();/*** 打开连接* @param session* @param token 当前登录用户的token，用于标识该连接的用户*/@OnOpenpublic void open(Session session, @PathParam("token") String token) {if(StringUtils.isBlank(token)) {return;}sessions.put(token, session);}/*** 关闭连接* @param session*/@OnClosepublic void close(Session session) {Iterator<Map.Entry<String, Session>> itr = sessions.entrySet().iterator();while(itr.hasNext()) {Map.Entry<String, Session> entry = itr.next();if(entry.getValue().equals(session)) {itr.remove();}}}/*** 收到消息* @param session* @param msg*/@OnMessagepublic void onMessage(Session session, String msg) {log.debug("getMsg from {}:{}", session.getId(), msg);}/*** 发送消息的方法* @param token* @param msg* @throws IOException*/public static void sendMsg(String token, String msg) throws IOException {Session session = sessions.get(token);if(session!=null) {session.getBasicRemote().sendText(msg);}}
}

前端代码

<template><div><input type="text" v-model="inputMessage"><button @click="sendMessage">发送</button><div>接收到消息:<br>{{receivedMsg}}</div></div>
</template>
<script>
export default {data() {return {socket: null,receivedMsg: '',inputMessage: ''};},mounted() {// Create a new WebSocket connectionlet baseUrl = "localhost:2222";let token = "xx";//登录得到的tokenthis.socket = new WebSocket(`ws://${baseUrl}/ws/${token}`);// Set up event listenersthis.socket.onopen = (event) => {console.log('WebSocket connection opened.');};this.socket.onmessage = (event) => {this.receivedMsg += event.data;};this.socket.onerror = (error) => {console.error('WebSocket Error:', error);};this.socket.onclose = (event) => {console.log('WebSocket connection closed.');};// 定时检查连接是否正常，不正常则重连this.timer = setInterval(() => {if (this.socket) {if (this.socket.readyState == 1) {try {this.socket.send('heartbeat');console.log('heartbeat');} catch (err){console.log('断线:' + err);this.connect();}} else if(this.socket.readyState == 3) {console.log('reconnect');this.connect();}}}, 10000);},methods: {connect() {// Create a new WebSocket connectionlet baseUrl = "localhost:2222";let token = "xx";//登录得到的tokenthis.socket = new WebSocket(`ws://${baseUrl}/ws/${token}`);},sendMessage() {if (this.socket && this.inputMessage) {this.socket.send(this.inputMessage);this.inputMessage = ''; // Clear the input field after sending}}},beforeDestroy() {// Close the WebSocket connection when the component is destroyedif (this.socket) {this.socket.close();}if (this.timer) {clearInterval(this.timer);}}
};
</script>