集成websocket

slibra-admin/pom.xml

@@ -90,6 +90,22 @@
 
 
 
+        <!-- websocket dependency -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-websocket</artifactId>
+            <version>2.7.12</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+            <version>2.7.12</version>
+        </dependency>
+
+
+
+
 
     </dependencies>
 

slibra-admin/src/main/java/com/slibra/WebSocketConfig.java

@@ -0,0 +1,22 @@
+package com.slibra;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.socket.server.standard.ServerEndpointExporter;
+
+/**
+ * WebSocket配置类。开启WebSocket的支持
+ */
+@Configuration
+public class WebSocketConfig {
+
+    /**
+     * bean注册：会自动扫描带有@ServerEndpoint注解声明的Websocket Endpoint(端点)，注册成为Websocket bean。
+     * 要注意，如果项目使用外置的servlet容器，而不是直接使用springboot内置容器的话，就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。
+     */
+    @Bean
+    public ServerEndpointExporter serverEndpointExporter() {
+        return new ServerEndpointExporter();
+    }
+
+}

slibra-admin/src/main/java/com/slibra/WebSocketServer.java

@@ -0,0 +1,169 @@
+package com.slibra;
+
+import com.alibaba.fastjson2.JSON;
+import com.alibaba.fastjson2.JSONObject;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+
+import javax.websocket.*;
+import javax.websocket.server.PathParam;
+import javax.websocket.server.ServerEndpoint;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.atomic.AtomicInteger;
+
+/**
+ * WebSocket的操作类
+ */
+@Component
+@Slf4j
+/**
+ * html页面与之关联的接口
+ * var reqUrl = "http://localhost:8080/websocket/" + cid;
+ * socket = new WebSocket(reqUrl.replace("http", "ws"));
+ */
+@ServerEndpoint("/websocket/{sid}")
+public class WebSocketServer {
+
+    /**
+     * 静态变量，用来记录当前在线连接数，线程安全的类。
+     */
+    private static AtomicInteger onlineSessionClientCount = new AtomicInteger(0);
+
+    /**
+     * 存放所有在线的客户端
+     */
+    private static Map<String, Session> onlineSessionClientMap = new ConcurrentHashMap<>();
+
+    /**
+     * 连接sid和连接会话
+     */
+    private String sid;
+    private Session session;
+
+    /**
+     * 连接建立成功调用的方法。由前端<code>new WebSocket</code>触发
+     *
+     * @param sid     每次页面建立连接时传入到服务端的id，比如用户id等。可以自定义。
+     * @param session 与某个客户端的连接会话，需要通过它来给客户端发送消息
+     */
+    @OnOpen
+    public void onOpen(@PathParam("sid") String sid, Session session) {
+        /**
+         * session.getId()：当前session会话会自动生成一个id，从0开始累加的。
+         */
+        log.info("连接建立中 ==> session_id = {}， sid = {}", session.getId(), sid);
+        //加入 Map中。将页面的sid和session绑定或者session.getId()与session
+        //onlineSessionIdClientMap.put(session.getId(), session);
+        onlineSessionClientMap.put(sid, session);
+
+        //在线数加1
+        onlineSessionClientCount.incrementAndGet();
+        this.sid = sid;
+        this.session = session;
+        sendToOne(sid, "连接成功");
+        log.info("连接建立成功，当前在线数为：{} ==> 开始监听新连接：session_id = {}， sid = {},。", onlineSessionClientCount, session.getId(), sid);
+    }
+
+    /**
+     * 连接关闭调用的方法。由前端<code>socket.close()</code>触发
+     *
+     * @param sid
+     * @param session
+     */
+    @OnClose
+    public void onClose(@PathParam("sid") String sid, Session session) {
+        //onlineSessionIdClientMap.remove(session.getId());
+        // 从 Map中移除
+        onlineSessionClientMap.remove(sid);
+
+        //在线数减1
+        onlineSessionClientCount.decrementAndGet();
+        log.info("连接关闭成功，当前在线数为：{} ==> 关闭该连接信息：session_id = {}， sid = {},。", onlineSessionClientCount, session.getId(), sid);
+    }
+
+    /**
+     * 收到客户端消息后调用的方法。由前端<code>socket.send</code>触发
+     * * 当服务端执行toSession.getAsyncRemote().sendText(xxx)后，前端的socket.onmessage得到监听。
+     *
+     * @param message
+     * @param session
+     */
+    @OnMessage
+    public void onMessage(String message, Session session) {
+        /**
+         * html界面传递来得数据格式，可以自定义.
+         * {"sid":"user-1","message":"hello websocket"}
+         */
+        JSONObject jsonObject = JSON.parseObject(message);
+        String toSid = jsonObject.getString("sid");
+        String msg = jsonObject.getString("message");
+        log.info("服务端收到客户端消息 ==> fromSid = {}, toSid = {}, message = {}", sid, toSid, message);
+
+        /**
+         * 模拟约定：如果未指定sid信息，则群发，否则就单独发送
+         */
+        if (toSid == null || toSid == "" || "".equalsIgnoreCase(toSid)) {
+            sendToAll(msg);
+        } else {
+            sendToOne(toSid, msg);
+        }
+    }
+
+    /**
+     * 发生错误调用的方法
+     *
+     * @param session
+     * @param error
+     */
+    @OnError
+    public void onError(Session session, Throwable error) {
+        log.error("WebSocket发生错误，错误信息为：" + error.getMessage());
+        error.printStackTrace();
+    }
+
+    /**
+     * 群发消息
+     *
+     * @param message 消息
+     */
+    private void sendToAll(String message) {
+        // 遍历在线map集合
+        onlineSessionClientMap.forEach((onlineSid, toSession) -> {
+            // 排除掉自己
+            if (!sid.equalsIgnoreCase(onlineSid)) {
+                log.info("服务端给客户端群发消息 ==> sid = {}, toSid = {}, message = {}", sid, onlineSid, message);
+                toSession.getAsyncRemote().sendText(message);
+            }
+        });
+    }
+
+    /**
+     * 指定发送消息
+     *
+     * @param toSid
+     * @param message
+     */
+    private void sendToOne(String toSid, String message) {
+        // 通过sid查询map中是否存在
+        Session toSession = onlineSessionClientMap.get(toSid);
+        if (toSession == null) {
+            log.error("服务端给客户端发送消息 ==> toSid = {} 不存在, message = {}", toSid, message);
+            return;
+        }
+        // 异步发送
+        log.info("服务端给客户端发送消息 ==> toSid = {}, message = {}", toSid, message);
+        toSession.getAsyncRemote().sendText(message);
+        /*
+        // 同步发送
+        try {
+            toSession.getBasicRemote().sendText(message);
+        } catch (IOException e) {
+            log.error("发送消息失败，WebSocket IO异常");
+            e.printStackTrace();
+        }*/
+    }
+
+}
+

slibra-admin/src/main/java/com/slibra/web/controller/business/WebSocketDemoController.java

@@ -0,0 +1,29 @@
+package com.slibra.web.controller.business;
+
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/demo")
+public class WebSocketDemoController {
+
+    /**
+     * 跳转到websocketDemo.html页面，携带自定义的cid信息。
+     * http://localhost:8080/demo/toWebSocketDemo/user-1
+     *
+     * @param cid
+     * @param model
+     * @return
+     */
+    @GetMapping("/toWebSocketDemo/{cid}")
+    public String toWebSocketDemo(@PathVariable String cid, Model model) {
+        model.addAttribute("cid", cid);
+        return "websocketDemo";
+    }
+
+}
+

slibra-admin/src/main/resources/application.yml

@@ -55,6 +55,14 @@ spring:
     basename: i18n/messages
   profiles:
     active: local
+  thymeleaf:
+    mode: HTML
+    cache: true
+    prefix: classpath:/templates/
+    encoding: UTF-8
+    suffix: .html
+    check-template-location: true
+    template-resolver-order: 1
   # 文件上传
   servlet:
     multipart:

slibra-admin/src/main/resources/templates/websocketDemo.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>666666</title>
+</head>
+<body>
+传递来的数据值cid:
+<input type="text" th:value="${cid}" id="cid"/>
+<p>【toUserId】：
+<div><input id="toUserId" name="toUserId" type="text" value="user-1"></div>
+<p>【contentText】：
+<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
+<p>【操作】：
+<div>
+    <button type="button" onclick="sendMessage()">发送消息</button>
+</div>
+</body>
+
+<script type="text/javascript">
+    var socket;
+    if (typeof (WebSocket) == "undefined") {
+        console.log("您的浏览器不支持WebSocket");
+    } else {
+        console.log("您的浏览器支持WebSocket");
+        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
+
+        var cid = document.getElementById("cid").value;
+        console.log("cid-->" + cid);
+        var reqUrl = "http://localhost:8080/websocket/" + cid;
+        socket = new WebSocket(reqUrl.replace("http", "ws"));
+        //打开事件
+        socket.onopen = function () {
+            alert("Socket 已打开");
+            console.log("Socket 已打开");
+            //socket.send("这是来自客户端的消息" + location.href + new Date());
+        };
+        //获得消息事件
+        socket.onmessage = function (msg) {
+            console.log("onmessage--" + msg.data);
+            //发现消息进入    开始处理前端触发逻辑
+        };
+        //关闭事件
+        socket.onclose = function () {
+            console.log("Socket已关闭");
+        };
+        //发生了错误事件
+        socket.onerror = function () {
+            alert("Socket发生了错误");
+            //此时可以尝试刷新页面
+        }
+        //离开页面时，关闭socket
+        //jquery1.8中已经被废弃，3.0中已经移除
+        // $(window).unload(function(){
+        //     socket.close();
+        //});
+    }
+
+    function sendMessage() {
+        if (typeof (WebSocket) == "undefined") {
+            console.log("您的浏览器不支持WebSocket");
+        } else {
+            // console.log("您的浏览器支持WebSocket");
+            var toUserId = document.getElementById('toUserId').value;
+            var contentText = document.getElementById('contentText').value;
+            var msg = '{"sid":"' + toUserId + '","message":"' + contentText + '"}';
+            console.log(msg);
+            socket.send(msg);
+        }
+    }
+
+</script>
+</html>
+

slibra-framework/src/main/java/com/slibra/framework/config/SecurityConfig.java

@@ -121,7 +121,8 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter
                 // 过滤请求
                 .authorizeRequests()
                 // 对于登录login 注册register 验证码captchaImage 允许匿名访问
-                .antMatchers("/login", "/register", "/captchaImage","/sendSmsCode/*","/smsLogin","/test/**").permitAll()
+                .antMatchers("/login", "/register", "/captchaImage","/sendSmsCode/*","/smsLogin","/test/**", "/demo/**").permitAll()
+                .antMatchers("/websocket/**").permitAll()//websocket的
                 // 静态资源，可匿名访问
                 .antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**").permitAll()
                 .antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()