spring长轮询 springboot轮询

转载

definitely 2024-04-18 15:18:20

文章标签 spring长轮询 java websocket spring boot vue 文章分类 架构后端开发

前言

早期，很多网站为了实现推送技术，所用的技术都是轮询。轮询是指由浏览器每隔一段时间（如每秒）向服务器发出HTTP请求，然后服务器返回最新的数据给客户端。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求与回复可能会包含较长的头部，其中真正有效的数据可能只是很小的一部分，所以这样会消耗很多带宽资源。比较新的轮询技术是Comet。这种技术虽然可以实现双向通信，但仍然需要反复发出请求。而且在Comet中普遍采用的HTTP长连接也会消耗服务器资源。在这种情况下，HTML5定义了WebSocket协议，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输，这样能更好的节省服务器资源和带宽，并且能够更实时地进行通讯（以上内容来自维基百科）。

Websocket使用ws或wss的统一资源标志符（URI）。其中wss表示使用了TLS的Websocket。如：

ws://example.com/wsapi
wss://secure.example.com/wsapi

下面就通过一个简单的例子介绍如何在SpringBoot中集成WebSocket，只展示WebSocket的核心配置，完整代码已上传到GitHub（由于下篇博客对本文的代码有改造，在测试的时候需要输入 https://localhost 而不是 http://localhost:8080，同时本地需要先创建一个 blog 数据库和 user 表并添加测试数据）:

效果展示

在展示代码配置前，先展示一下效果（已提前登录了三个用户）：

spring长轮询 springboot轮询_spring长轮询

具体的代码配置

引入依赖
首先需要在pom.xml中引入以下依赖：

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

配置ServerEndpointExporter的Bean

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

配置服务器终端

@Component
@ServerEndpoint("/websocket")
public class WebSocketServer {

    private Session session;
    // 保存所有的客户端连接
    private static final Map<String, WebSocketServer> connections = new LinkedHashMap<>();

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        connections.put(session.getId(), this);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        try {
            sendMessage(message);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @OnError
    public void onError(Throwable error, Session session) throws Throwable {
        throw error;
    }

    @OnClose
    public void onClose() {
        connections.remove(session.getId());
    }

    public void sendMessage(String message) throws IOException {
        session.getBasicRemote().sendText(message);
    }

    // 广播方法(实现消息群发)
    public static void broadcast(String message) {
        connections.forEach((k, v) -> {
            try {
                v.sendMessage(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        });
    }
}

配置群发通知接口

@RestController
public class BroadcastController {

    @PostMapping("/broadcast")
    public void broadcast(@RequestBody String msg){
        WebSocketServer.broadcast(msg);
    }
}

客户端配置
客户端简单使用Vue框架，没有使用单文件组件形式，客户端连接代码如下：

let socket = new WebSocket("ws://localhost:8080/websocket")
socket.onerror = err => {
    console.log(err)
}

socket.onopen = event => {
    console.log(event)
}

socket.onmessage = event => {
    // 这里接受服务端发送的信息
    vue.$data.toast = {
        isShow: true,
        msg: JSON.parse(event.data).msg
    }
}

socket.onclose = () => {
    console.log("连接关闭")
}

完成以上简单配置后，只要调用了群发信息的接口，客户端就可以通过onmessage函数来处理接收到的信息。