SpringBoot整合WebSocket

流程分析

Websocket客户端与Websocket服务器端

 前端浏览器和后端服务器的连接通信

 HTTP与Websocket对比

前端代码

MyComponent.vue

<template>  
  <div>  
    <button @click="sendMessage">发送消息button>  
  div>  
template>  
  
<script>  
export default {  
  data() {  
    return {  
      socket: null,  
    };  
  },  
  created() {  
    this.connectSocket();  
  },  
  methods: {  
    connectSocket() {  
      this.socket = new WebSocket("ws://10.1.7.118:8388/bwss-facade/wsServer/1695365508391"); // 替换为你的用户ID  
      this.socket.onopen = () => {  
        console.log("连接成功");  
      };  
      this.socket.onmessage = (event) => {  
        console.log("收到消息:", event.data);  
      };  
      this.socket.onerror = (error) => {  
        console.error("WebSocket错误:", error);  
      };  
    },  
    sendMessage() {  
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {  
        this.socket.send("我是客户端，发送消息！");  
      } else {  
        console.error("WebSocket连接未建立");  
      }  
    },  
  },  
};  
script>

 App.vue

<template>  
  <div id="app">  
    <MyComponent />  
  div>  
template>  
  
<script>  
import MyComponent from './components/MyComponent.vue';  
  
export default {  
  name: 'App',  
  components: {  
    MyComponent  
  }  
}  
script>

后端编码

1.引入pom依赖

<dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-websocketartifactId>
dependency>

2. 编写配置类

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

3.编写服务代码

import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
 
/**
 * WebSocket服务器设置
 */
@ServerEndpoint(value = "/wsServer/{userId}")
@Component
public class WebSocketServer
{
 
    // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    public static ConcurrentHashMap webSocketMap = new ConcurrentHashMap<>();
 
    public static ConcurrentHashMap typeMap = new ConcurrentHashMap<>();
    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
 
    // 接收userId
    private String userId = "";
 
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId)
    {
        this.session = session;
        this.userId = userId;
        if (webSocketMap.containsKey(userId))
        {
            webSocketMap.remove(userId);
            webSocketMap.put(userId, this);
        } else
        {
            webSocketMap.put(userId, this);
        }
        try
        {
            sendMessage("我是服务端，你连接成功了！");
        } catch (IOException e)
        {
            e.printStackTrace();
        }
    }
 
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose()
    {
        if (webSocketMap.containsKey(userId))
        {
            webSocketMap.remove(userId);
        }
    }
 
    /**
     * 收到客户端消息后调用的方法
     */
    @OnMessage
    public void onMessage(String message, Session session)
    {
        if (StringUtils.isNotBlank(message))
        {
            try
            {
                // 解析发送的报文
                JSONObject jsonObject = JSON.parseObject(message);
                String type = (String) jsonObject.get("type");
                if (typeMap.containsKey(type))
                {
                    typeMap.remove(type);
                    typeMap.put(type, this);
                } else
                {
                    typeMap.put(type, this);
                }
            } catch (Exception e)
            {
                e.printStackTrace();
            }
        }
    }
 
    /**
     * 发生错误时调用
     */
    @OnError
    public void onError(Session session, Throwable error)
    {
        error.printStackTrace();
    }
 
    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message) throws IOException
    {
        this.session.getBasicRemote().sendText(message);
    }
 
    /**
     * 发送自定义消息
     */
    public static void sendInfo(String message, @PathParam("userId") String userId) throws IOException
    {
        if (StringUtils.isNotBlank(userId) && webSocketMap.containsKey(userId))
        {
            webSocketMap.get(userId).sendMessage(message);
        }
    }
 
}

4.状态变更通知前端

// 通过WebSocket通知前端人员下发状态变更
try
{
    // 通过map获取对应的session
    WebSocketServer.typeMap.get("userId").sendMessage(封装的消息体);
} catch (IOException e)
{
    throw new RuntimeException(e);
}