WebSocket后端主动唤起前端

最新推荐文章于 2024-09-08 19:45:37 发布

归鸿铭

最新推荐文章于 2024-09-08 19:45:37 发布

阅读量159

点赞数

文章标签： websocket 前端 java

本文链接：https://blog.csdn.net/qq_42221396/article/details/133922672

版权

WebSocket后端主动唤起前端

构建一个maven项目pom文件依赖
- 编写前端代码
- 说明：

构建一个maven项目pom文件依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.3.5.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.3.5.RELEASE</version>
        </dependency>

1 创建一个websocket 的config


@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Autowired
    private CustomInterceptor customInterceptor;
    @Autowired
    private MyWebSocketHandler myWebSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry
                .addHandler(myWebSocketHandler, "websocket")
                .addInterceptors(customInterceptor)
                .setAllowedOrigins("*");
    }
}

2 创建自己的握手拦截器HandshakeInterceptor


@Component
public class CustomInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
        System.out.println("握手开始");

        // 获得请求参数
        URI uri = request.getURI();
        String query = uri.getPath();
        if (StringUtils.hasText(query)) {
            return true;
        }

        System.out.println("用户登录已失效");
        return false;
    }

    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
        System.out.println("握手完成");
    }
}

3 创建自己的数据处理器TextWebSocketHandler


@Component
public class MyWebSocketHandler extends TextWebSocketHandler {


    /**
     * socket 建立成功事件
     *
     * @param session
     * @throws Exception
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
//        Object token = session.getAttributes().get("token");
//        if (token != null) {
            // 用户连接成功，放入在线用户缓存
            WsSessionManager.add("1", session);
//        } else {
//            throw new RuntimeException("用户登录已经失效!");
//        }
    }

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        // 处理接收到的消息
        System.out.println("Received message: " + message.getPayload());
        // 发送消息给客户端
        session.sendMessage(new TextMessage("Hello, " + message.getPayload() + "!"));
    }

    /**
     * socket 断开连接时
     *
     * @param session
     * @param status
     * @throws Exception
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        Object token = session.getAttributes().get("token");
        if (token != null) {
            // 用户退出，移除缓存
            WsSessionManager.remove(token.toString());
        }
    }

}

编写前端代码

<!DOCTYPE html>
<html>
<head>
    <title>工单信息</title>
    <form action="#" onsubmit="return validateForm()">
        <label for="category">类&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
        <select id="category">
            <option value="">请选择类别</option>
            <option value="value1">退单</option>
            <option value="value2">加项</option>
            <option value="value3">样本不合格</option>
            <option value="value4">处理</option>
            <!-- 添加其他类别选项 -->
        </select>
        <br>
        <label for="submitter">提交人：</label>
        <input type="text" id="submitter" name="submitter" required>
        <br>
        <label for="notifier">通知人：</label>
        <input type="text" id="notifier" name="notifier" required>
        <br>
        <label for="remark">备&nbsp;&nbsp;&nbsp;注：</label>
        <textarea id="remark" name="remark"></textarea>
        <br>
        <input type="submit" value="提交">
        <br>
        <div id="result"></div>
    </form>
</head>
<body>
<style>
    #re {
      width: 300px;
      height: 50px;
      overflow-wrap: break-word;
    }
</style>
<script>

    function validateForm() {


      var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
      xhr.open('POST', 'http://localhost:8080/api/hello', true); // 设置请求方法、后端接口地址和异步标志
      xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); // 或者设置为允许的域名
      xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
      xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头（如果需要）
      var submitterDate = document.getElementById("submitter").value;
      var notifierDate = document.getElementById("notifier").value;
      var remarkDate = document.getElementById("remark").value;
      var data = { submitter: submitterDate, notifier: notifierDate,remark:remarkDate };

      xhr.onreadystatechange = function() { // 监听状态变化事件
        if (xhr.readyState === XMLHttpRequest.DONE) { // 判断请求是否完成
          if (xhr.status === 200) { // 判断响应状态码是否为200（成功）
            var response = JSON.parse(xhr.responseText); // 解析响应数据为JSON格式
<!--            document.getElementById('result').innerHTML = response; // 将响应数据显示在页面-->
          } else {
            console.error('请求失败：' + xhr.status); // 输出错误信息
          }
        }
      };
      xhr.send(JSON.stringify(data)); // 发送请求
    };

    // 创建WebSocket连接
    var socket = new WebSocket("ws://localhost:8080/websocket");
    // 连接打开时触发的事件处理函数
    socket.onopen = function() {
        console.log("WebSocket connected.");
    };

    // 接收到消息时触发的事件处理函数
    socket.onmessage = function(event) {
     document.addEventListener('DOMContentLoaded', (event) => {
        var resultElement = document.getElementById('result');
        if (resultElement) {
            resultElement.innerHTML = "<title>" + event.data + "</title>";
        }
     });
    };
</script>
</body>
</html>

说明：

当前端new 一个WebSocket 对象时，会去调用其ws://localhost:8080/websocket 接口，这个会跟后天服务器建立一个类似于长连接的通讯链路，在后天向这个链路中发送消息是，前端可以通过onmessage 函数进行数据的处理，可以做一个后端返回给数据前端，前端及时弹窗的一个功能

归鸿铭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebSocket后端主动唤起前端

当前端new 一个WebSocket 对象时，会去调用其ws://localhost:8080/websocket 接口，这个会跟后天服务器建立一个类似于长连接的通讯链路，在后天向这个链路中发送消息是，前端可以通过onmessage 函数进行数据的处理，可以做一个后端返回给数据前端，前端及时弹窗的一个功能。// 创建XMLHttpRequest对象。// 连接打开时触发的事件处理函数。// 将响应数据显示在页面-->// 创建WebSocket连接。// 或者设置为允许的域名。// 判断请求是否完成。
复制链接

扫一扫