10-8 集成 WebSocket

pom.xml

@@ -96,6 +96,11 @@
             <version>3.0.2</version>
         </dependency>
 
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-websocket</artifactId>
+        </dependency>
+
     </dependencies>
 
     <dependencyManagement>

src/main/java/io/github/yubincloud/fairywiki/config/WebSocketConfig.java

+package io.github.yubincloud.fairywiki.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.socket.server.standard.ServerEndpointExporter;
+
+@Configuration
+public class WebSocketConfig {
+
+    @Bean
+    public ServerEndpointExporter serverEndpointExporter() {
+        return new ServerEndpointExporter();
+    }
+
+}

src/main/java/io/github/yubincloud/fairywiki/websocket/WebSocketServer.java

+package io.github.yubincloud.fairywiki.websocket;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Component;
+
+import javax.websocket.*;
+import javax.websocket.server.PathParam;
+import javax.websocket.server.ServerEndpoint;
+import java.io.IOException;
+import java.util.HashMap;
+
+@Component
+@ServerEndpoint("/ws/{token}")
+public class WebSocketServer {
+    private static final Logger LOG = LoggerFactory.getLogger(WebSocketServer.class);
+
+    /**
+     * 每个客户端一个token
+     */
+    private String clientToken = "";
+
+    private static final HashMap<String, Session> sessionMap = new HashMap<>();
+
+    /**
+     * 连接成功
+     */
+    @OnOpen
+    public void onOpen(Session session, @PathParam("token") String token) {
+        sessionMap.put(token, session);
+        this.clientToken = token;
+        LOG.info("有新连接：token：{}，session id：{}，当前连接数：{}", token, session.getId(), sessionMap.size());
+    }
+
+    /**
+     * 连接关闭
+     */
+    @OnClose
+    public void onClose(Session session) {
+        sessionMap.remove(this.clientToken);
+        LOG.info("连接关闭，token：{}，session id：{}！当前连接数：{}", this.clientToken, session.getId(), sessionMap.size());
+    }
+
+    /**
+     * 收到消息
+     */
+    @OnMessage
+    public void onMessage(String message, Session session) {
+        LOG.info("收到消息：{}，内容：{}", clientToken, message);
+    }
+
+    /**
+     * 连接错误
+     */
+    @OnError
+    public void onError(Session session, Throwable error) {
+        LOG.error("发生错误", error);
+    }
+
+    /**
+     * 群发消息
+     */
+    public void sendInfo(String message) {
+        for (String token : sessionMap.keySet()) {
+            Session session = sessionMap.get(token);
+            try {
+                session.getBasicRemote().sendText(message);
+            } catch (IOException e) {
+                LOG.error("推送消息失败：{}，内容：{}", token, message);
+            }
+            LOG.info("推送消息：{}，内容：{}", token, message);
+        }
+    }
+
+}

web/src/components/the-footer.vue

@@ -6,14 +6,55 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from "vue";
+import {computed, defineComponent, onMounted} from "vue";
 import store from "@/store";
+import { Tool } from "@/util/tool";
 
 export default defineComponent({
   name: 'the-footer',
   setup() {
     const currUser = computed(() => store.state.localUser);
 
+    let websocket: any;
+    let token: any;
+    const onOpen = () => {
+      console.log('WebSocket连接成功，状态码：', websocket.readyState)
+    };
+    const onMessage = (event: any) => {
+      console.log('WebSocket收到消息：', event.data);
+    };
+    const onError = () => {
+      console.log('WebSocket连接错误，状态码：', websocket.readyState)
+    };
+    const onClose = () => {
+      console.log('WebSocket连接关闭，状态码：', websocket.readyState)
+    };
+    const initWebSocket = () => {
+      // 连接成功
+      websocket.onopen = onOpen;
+      // 收到消息的回调
+      websocket.onmessage = onMessage;
+      // 连接错误
+      websocket.onerror = onError;
+      // 连接关闭的回调
+      websocket.onclose = onClose;
+    };
+
+    onMounted(() => {
+      // WebSocket
+      if ('WebSocket' in window) {
+        token = Tool.uuid(10);
+        // 连接地址：ws://127.0.0.1:8880/ws/xxx
+        websocket = new WebSocket(process.env.VUE_APP_WS_SERVER + '/ws/' + token);
+        initWebSocket()
+
+        // 关闭
+        // websocket.close();
+      } else {
+        alert('当前浏览器 不支持')
+      }
+    });
+
     return {
       currUser
     }