SpringBoot整合Websocket的使用_spring boot websocket 客户端

一、什么是WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它允许客户端和服务器之间的双向通信，使得实时数据传输成为可能。相比传统的 HTTP 请求-响应模型，WebSocket 具有更低的延迟，更高的性能和更少的网络开销。

WebSocket 协议的特点包括：

1. 全双工通信：WebSocket 允许客户端和服务器之间同时进行双向通信，而不是像 HTTP 那样只能由客户端发起请求，服务器才能响应。

2. 低延迟：由于 WebSocket 建立在单个 TCP 连接上，因此可以减少因为建立和销毁连接而引起的网络开销，从而实现更低的延迟。

3. 轻量级：WebSocket 的协议头较小，相比于一些其他协议（如 HTTP），它在通信时的网络开销较少。

4. 实时性：WebSocket 适用于需要实时更新的应用程序，如在线游戏、股票交易、即时聊天等，因为它能够提供持续的连接并立即传输数据。

5. 跨平台性：WebSocket 协议是跨平台的，可以在各种操作系统和设备上使用，包括桌面浏览器、移动设备和服务器端应用程序。

WebSocket 协议通过在 HTTP 协议的升级过程中建立连接，实现了与 Web 服务器的通信。一旦建立了 WebSocket 连接，客户端和服务器之间就可以直接通过发送消息进行实时通信，而不需要每次通信都建立新的连接。这种持久连接的特性使得 WebSocket 成为实现实时 Web 应用程序的重要技术之一。

二、Websocket适用场景

WebSocket 在以下几种场景中特别适用：

1. 实时通信应用程序：WebSocket 最常见的用途之一是实时通信应用程序，如聊天应用程序、在线游戏、实时数据更新等。通过 WebSocket，客户端和服务器可以建立持久连接，实时地交换消息，实现实时性要求较高的应用场景。

2. 在线协作工具：在线协作工具（如实时文档编辑、白板共享等）需要多个用户之间的实时同步和通信。WebSocket 可以用于实现用户之间的实时协作，使得多个用户能够实时地查看和编辑共享的内容。

3. 实时数据监控和展示：对于需要实时监控和展示数据的应用场景，WebSocket 可以用于从服务器实时获取数据并在客户端展示，如实时股票报价、实时天气预报、实时交通信息等。

4. 在线客服系统：在线客服系统需要实现客户和客服之间的实时交流和沟通。通过 WebSocket，客户可以实时向客服发送消息，客服也可以实时地回复客户，提供更加及时的服务。

5. 实时事件通知：对于需要向用户发送实时事件通知的应用场景，如新闻推送、社交网络通知等，WebSocket 可以用于向客户端推送实时事件通知，使得用户能够及时地收到重要信息。

总的来说，WebSocket 适用于需要实现实时性通信和交互的应用场景，能够提供更加流畅和即时的用户体验。

三、使用SpringBoot整合Websocket

   1、添加依赖：首先，在 pom.xml  中添加 Spring WebSocket 的依赖。对于 Maven 项目，可以添加以下依赖：

        

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

2、创建一个配置类，用于配置 WebSocket 的端点和处理器。

/**
 * WebSocket配置类
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig {
 
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
 
}

3、编写 WebSocket 处理器：创建一个类来处理 WebSocket 连接和消息。

import com.yupi.springbootinit.model.entity.WebSocketMessage;
import lombok.extern.slf4j.Slf4j;
 
import org.springframework.stereotype.Component;
 
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.ConcurrentHashMap;
 
 
/**
 *
 * @author caicai
 * @date
 * @ServerEndpoint
 */
@Component
@Slf4j
@ServerEndpoint(value = "/websocket")
public class WebSocketServer {
    /**
     * 某个客户端连接的session
     */
    private Session session;
 
    private static ConcurrentHashMap<String,Session> clientMap = new ConcurrentHashMap<>();
 
    /**
     * 建立连接后调用的方法
     * @param session
     */
    @OnOpen
    public void onOpen(Session session){
        log.info("-----websocket成功连接------");
        this.session = session;
        clientMap.put(this.session.getId(),this.session);
    }
 
    /**
     * 处理客户端失败连接
     */
    @OnClose
    public void onClose(){
        clientMap.remove(this.session.getId());
        log.info("客户端失去连接,其sessionID为："+this.session.getId());
    }
 
    /**
     * 连接报错时的处理方式
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("消息发生错误："+session.getId());
        error.printStackTrace();
    }
 
    /**
     * 如果需要服务器接受客户端的消息就在这里写了
     * @param text
     */
    @OnMessage
    public void onMessage(String text){
        log.info("接受到客户端传来的消息："+text);
    }
 
    /**
     * 推送消息
     * getAsyncRemote获取异步端点(推荐使用这个)
     * getBasicRemote获取阻塞端点（不推荐，如果第一次发送失败，就会一直阻塞，影响后面的进行）
     * @param message
     */
    public static void sendMessage(WebSocketMessage message){
        // 遍历向所有用户发送消息
        clientMap.entrySet().stream().forEach(item ->{
            item.getValue().getAsyncRemote().sendText(message.getMessageContent());
        });
    }
 
    /**
     * 将消息发送给特定的用户
     */
    public static void sendToSpecClient(String clientId,WebSocketMessage webSocketMessage){
        if(clientMap.contains(clientId)){
            clientMap.get(clientId).getAsyncRemote().sendText(webSocketMessage.getMessageContent());
        }else{
            clientMap.remove(clientId);
            // throw new RuntimeException("特定用户消息发生错误，请稍后重试");
        }
    }
 
 

后端简单整合就此完成

Websocket在线模拟请求工具：支持内网和外网Websocket测试

地址：Websocket在线测试-Websocket接口测试-Websocket模拟请求工具

查看后台输出

四、整合js测试

下面是一个简单的示例，演示了如何在前端页面中使用 JavaScript 整合 WebSocket：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Demo</title>
</head>
<body>
    <h1>WebSocket Demo</h1>
    <input type="text" id="message" placeholder="Enter message">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>
 
    <script>
        // 创建 WebSocket 连接
        var socket = new WebSocket("ws://localhost:123456/websocket");
 
        // 监听连接建立事件
        socket.onopen = function(event) {
            console.log("WebSocket连接已建立");
        };
 
        // 监听收到消息事件
        socket.onmessage = function(event) {
            console.log("收到消息：" + event.data);
            var messagesDiv = document.getElementById("messages");
            messagesDiv.innerHTML += "<p>" + event.data + "</p>";
        };
 
        // 监听连接关闭事件
        socket.onclose = function(event) {
            console.log("WebSocket连接已关闭");
        };
 
        // 发送消息函数
        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);
        }
    </script>
</body>
</html>

 

在这个示例中，首先通过 new WebSocket("ws://localhost:123456/websocket") 创建了一个 WebSocket 连接，连接到了 ws://localhost:123456/websocket 这个端点。然后，通过监听连接建立、收到消息和连接关闭等事件，分别执行相应的操作。最后，通过 socket.send(message) 函数发送消息。

在实际项目中，你可以根据具体需求进一步扩展 WebSocket 的功能，例如处理连接错误、重连机制、消息处理、心跳机制等。