​

 博客主页:     南来_北往

🔥系列专栏：Spring Boot实战

什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务器主动向客户端推送信息，同时也能从客户端接收信息。

WebSocket协议诞生于2008年，并在2011年成为国际标准。这种协议解决了传统HTTP请求中需要不断轮询服务器的问题，通过建立持久化的连接，实现了高效的双向数据传输。具体如下：

基本特点：WebSocket建立在TCP协议之上，提供了一个全双工通信通道。这意味着服务器和客户端可以在一个连接上同时发送和接收信息，且数据交换更加高效。

协议兼容：虽然WebSocket是一个独立的协议，但它在握手阶段使用HTTP协议，以确保与现有系统的兼容性。其默认端口也是80和443，使得它可以通过各种HTTP代理服务器。

应用场景：WebSocket非常适合需要实时数据交互的应用，如聊天应用、在线游戏、实时通知等。

数据格式：WebSocket支持传输文本和二进制数据，并且数据格式轻量，开销小，性能高。

API使用：在开发中，可以使用WebSocket API轻松地创建和管理连接，并通过这些连接发送和接收数据。例如，在JavaScript中，可以这样创建和处理WebSocket连接：

<code>// 创建WebSocket连接

var socket = new WebSocket('ws://localhost:8080');

// 连接成功触发

socket.addEventListener('open', function (event) {

socket.send('Hello Server!');

});

// 监听消息

socket.addEventListener('message', function (event) {

console.log('Message from server ', event.data);

});

综上所述，WebSocket通过提供高效、低开销的双向通信协议，极大地改善了实时数据传输的体验，适用于需要频繁数据交互的应用场景 。

实现

1、在你的pom.xml文件中添加以下依赖：

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

</dependency>

2、创建一个配置类，继承AbstractWebSocketMessageBrokerConfigurer，并重写configureMessageBroker和registerStompEndpoints方法。 

import org.springframework.context.annotation.Configuration;

import org.springframework.messaging.simp.config.MessageBrokerRegistry;

import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;

import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;

import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

@Override

public void configureMessageBroker(MessageBrokerRegistry config) {

config.enableSimpleBroker("/topic");

config.setApplicationDestinationPrefixes("/app");

}

@Override

public void registerStompEndpoints(StompEndpointRegistry registry) {

registry.addEndpoint("/websocket").withSockJS();

}

}

 3、创建一个类，用于处理客户端发送的消息和向客户端发送消息。

import org.springframework.messaging.handler.annotation.MessageMapping;

import org.springframework.messaging.handler.annotation.SendTo;

import org.springframework.stereotype.Controller;

@Controller

public class WebSocketController {

@MessageMapping("/send")

@SendTo("/topic/messages")

public String handleMessage(String message) {

return "Received: " + message;

}

}

4、在前端，你需要使用SockJS和STOMP.js库来连接WebSocket服务器并接收消息。首先，确保你已经在HTML文件中引入了这两个库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>code>

<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>code>

5、然后，你可以使用以下JavaScript代码连接到WebSocket服务器并接收消息：

// 建立连接

var socket = new SockJS('/websocket');

var stompClient = Stomp.over(socket);

// 连接到服务器

stompClient.connect({}, function (frame) {

console.log('Connected: ' + frame);

// 订阅消息

stompClient.subscribe('/topic/messages', function (message) {

console.log('Received: ' + message.body);

});

});

// 发送消息

function sendMessage() {

var message = document.getElementById('message').value;

stompClient.send("/app/send", {}, message);

}

 现在，当你调用sendMessage函数时，它将通过WebSocket向后端发送消息，后端将处理该消息并将其广播到所有订阅了/topic/messages的客户端。