基于springboot实现websocket连接的小demo

最新推荐文章于 2024-06-09 21:46:05 发布

ssssssssssy1

最新推荐文章于 2024-06-09 21:46:05 发布

阅读量874

点赞数 8

文章标签： websocket

本文链接：https://blog.csdn.net/ssssssssssy1/article/details/137721528

版权

本文介绍了WebSocket在高并发场景下的优势，通过浏览器与后端建立持久连接，避免了频繁轮询造成的性能压力。作者还展示了SpringBoot中如何实现WebSocket服务和消息传递的代码示例。

摘要由CSDN通过智能技术生成

先说一下websocket的使用场景就是需要浏览器页面和实时可以和后端服务器交互的场景比如数据库数据发生改变但是页面上需要实时刷新的情况但是好像前端可以轮询2s调用一次调用查询接口一直刷新也能实现但是假如说用户量上万了或者很大的情况下几万人同时在这个需要2s轮询的界面数据库每两秒就要接收上万次这个请求数据库就裂开了所以这个时候就可以使用websocket 在指定的业务逻辑下刷新消息比如说这个页面是轮询每2s 查看接口查看自己的通知所以就可以在查看的时候和后端建立一个websocket连接在别的用户给这个用户发消息的接口中使用websocke连接给指定用户发送一个刷新页面的信号这样就不需要轮询了。

虽然但是我感觉写这个demo 还是需要理解 websocket 是一个什么样子的东西所以需要理解了前端和后端数据是如何交互的我的理解是浏览器是通过Nginx服务器指定的前端代码和一些静态资源的路径然后浏览器解析从nginx中获取的代码然后执行代码后端接口的作用就是获取一些动态的数据然后填充到静态页面中所以我的理解中其实这个后端的websocket 建立的连接实际是和当前使用的用户浏览器连接群推消息就是所有浏览器发送指定消息就是通过每个浏览器websocket连接中的id 推给指定的浏览器。我一开始也不太理解我一开始是以为这个连接是建立在后端服务器和前端服务器我就觉得有点怪了要理解了第二段话这个websocket 其实是一个很简单的东西

现在开始直接诶上代码

1、前端代码

我的理解是这个是一段浏览器能看懂的代码新建个txt文件然后吧这个复制进去然后把文件后缀名改成 .html文件 (其实我的demo是有点小问题的这段代码是先建立连接再发送消息其实是可以在连接的时候就指定一个用户id)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Connection</title>
<script>
// JavaScript code to establish WebSocket connection
const socket = new WebSocket('ws://localhost:8080/websocket');

// 当WebSocket连接建立时执行
socket.onopen = function(event) {
console.log("WebSocket connection opened");

// 连接建立完成后发送消息给后端
const message = "Hello, backend!";
socket.send(message);
};

// 当收到后端发送的消息时执行
socket.onmessage = function(event) {
console.log("Message received: ", event.data);
// 处理收到的消息
};

// 当WebSocket连接关闭时执行
socket.onclose = function(event) {
console.log("WebSocket connection closed");
};

// 当发生错误时执行
socket.onerror = function(error) {
console.error("WebSocket error: ", error);
};
</script>
</head>
<body>
<h1>WebSocket Connection</h1>
<p>Connecting to WebSocket server...</p>
</body>
</html>

2、后端代码

第一步整个依赖

 <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
</dependencies>

第二步 websocket的使用方法的类

package com.service.impl;

import antlr.StringUtils;
import cn.hutool.core.util.ObjectUtil;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.TextMessage;

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;


@Component
public class MyWebSocketHandler extends TextWebSocketHandler {
    private static final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
    private static final ObjectMapper objectMapper = new ObjectMapper();
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {


        // 当WebSocket连接建立时执行
        // 可以在这里处理连接的逻辑，例如将连接保存到某个集合中
        
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的文本消息
        System.out.println(session);
        String payload = message.getPayload();
        System.out.println(payload);
        sessions.put(payload, session);;
        // 在这里可以处理接收到的消息，并做出相应的响应
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // 当WebSocket连接关闭时执行
        // 可以在这里处理连接关闭的逻辑，例如将连接从集合中移除
    }
      //这个方法是用在别的类调用这个类的时候 获取这个类中的map
    public  Map<String, WebSocketSession> getSessions() {
        return sessions;
    }

}

第三步 websocket的配置类

package com.service.impl;

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 {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 注册WebSocket处理器，并指定连接路径
        registry.addHandler(new MyWebSocketHandler(), "/websocket").setAllowedOrigins("*");
    }
}

第四步在接口中获取浏览器和id绑定消息给指定浏览器链接的发送消息

@GetMapping("/hello")

public ResultInfo hello() throws  Exception {// 1.接收参数
    
    Map<String, WebSocketSession> sessions = myWebSocketHandler.getSessions();

    if (sessions.get("Hello, backend!") != null && sessions.get("Hello, backend!").isOpen()) {
        sessions.get("Hello, backend!").sendMessage(new TextMessage("给执行完这个接口浏览器一个刷新的信号"));
    }
    // 3.返回结果
    return null;
}

第五步在加个启动类

package com;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebSocketDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketDemoApplication.class, args);
    }
}

这段代码的作用就是浏览器和后端建立一个链接这个连接会有一个指定的连接id 举例:浏览器和后端建立连接在发送一个用户id 然后后端通过这个用户id和连接的id 用一个map进行绑定在执行接口的时候从数据库查出这个操作是哪个用户id的然后根据库里的id 去判断map查询数据有无这个连接有这个连接的话从map中根据用户id取出 WebSocket连接id 然后给何这个WebSocketid绑定的浏览器发送一个刷新页面的信号.

顺带再放上gtp的评价

下班!

ssssssssssy1

关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
基于springboot实现websocket连接的小demo

虽然但是我感觉写这个demo 还是需要理解 websocket 是一个什么样子的东西所以需要理解了前端和后端数据是如何交互的我的理解是浏览器是通过Nginx服务器指定的前端代码和一些静态资源的路径然后浏览器解析从nginx中获取的代码然后执行代码后端接口的作用就是获取一些动态的数据然后填充到静态页面中所以我的理解中。// 可以在这里处理连接关闭的逻辑，例如将连接从集合中移除。//这个方法是用在别的类调用这个类的时候获取这个类中的map。// 处理收到的文本消息。
复制链接

扫一扫