SpringBoot 整合WebSocket

写在前面的话:

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

上!代!码!

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值