SpringBoot 整合WebSocket

最新推荐文章于 2022-06-29 23:47:29 发布

有志青年_ZM

最新推荐文章于 2022-06-29 23:47:29 发布

阅读量142

点赞数 1

分类专栏： SpringCloud

本文链接：https://blog.csdn.net/qq_29814157/article/details/90290417

版权

SpringCloud 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写在前面的话：

一直了解，但是并没有整合过代码，刚好项目用到，仅做记录。

上！代！码！

1.server端

第一步：首先继承 WebSocketConfigurer 创建配置

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Autowired
    private LarkDeviceHandler deviceHandler;

    @Autowired
    private LarkHandshakeInterceptor handshakeInterceptor;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(deviceHandler, "/device")//Handler 处理信息
                .addInterceptors(handshakeInterceptor) //拦截器
                .setAllowedOrigins("*"); //允许跨域 请求
    }
}

第二步：继承 TextWebSocketHandler 创建 Handler

import com.haima.lark.ws.Log;
import com.haima.lark.ws.domain.LarkMessage;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

@Service
public class LarkDeviceHandler extends TextWebSocketHandler {

    @Autowired
    private DevicesManager devicesManager;

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        //TODO 获取send Message
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        super.afterConnectionEstablished(session);

        //TODO 建立连接之后，回传信息

    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        super.afterConnectionClosed(session, status);
        
        //TODO 断开连接之后，回传信息
    }
}

第二步：继承 HandshakeInterceptor 创建拦截器

import org.apache.commons.lang3.StringUtils;
import org.slf4j.MDC;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.lang.Nullable;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

import java.util.Map;



@Component
public class LarkHandshakeInterceptor implements HandshakeInterceptor{

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler, Map<String, Object> map) throws Exception {
        ServletServerHttpRequest httpRequest =  (ServletServerHttpRequest) request;
        String groupId = httpRequest.getServletRequest().getParameter("gid");
        //建立连接时，进行参数校验
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, @Nullable Exception e) {

    }
}

Web端

新建一个 .html 的文件将代码拷走即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>4</title>
    <script type="text/javascript">
        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            if ('WebSocket' in window){
                  console.log('Websocket supported');
                  socket = new WebSocket('ws://localhost:8903/device?gid=1');

                  console.log('Connection attempted');

                  socket.onopen = function(){
                       console.log('Connection open!');
                       setConnected(true);
                    }

                  socket.onclose = function(){
                      console.log('Disconnecting connection');
                  }

                  socket.onmessage = function (evt)
                     {
                        console.log('onmessage');
                        var received_msg = evt.data;
                        console.log(received_msg);
                        console.log('message received!');
                        showMessage(received_msg);
                     }

                } else {
                  console.log('Websocket not supported');
                }
        }

        function disconnect() {
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var message = document.getElementById('message').value;
            socket.send(JSON.stringify({ 'message': message }));
        }

        function showMessage(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body>
    <button id="connect" onclick="connect()">connect</button>
    <button id="disconnect" onclick="disconnect()"/>disconnect</button><br>
    <input id="message" value="send message"/>
    <button onclick="sendName()">发送消息</button>
    <div id="response"></div>
</body>
</html>