websocket--技术文档--spring后台+vue基本使用

阿丹:

        给大家分享一个可以用来进行测试websocket的网页，个人觉得还是挺好用的.

WebSocket在线测试工具

还有一个小家伙ApiPost也可以进行使用websocket的测试。

本文章只是基本使用--给大家提供思路简单实现！！

使用spring-boot建立一个服务端

在Spring Boot中使用WebSocket建立服务端，可以按照以下步骤进行：

1. 确保的Spring Boot项目已经创建并配置好。
2. 在项目的pom.xml文件中，添加WebSocket的依赖。

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

1. 创建一个WebSocket配置类，用于配置WebSocket服务器。

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 {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(myHandler(), "/websocket/test/{sid}");}@Beanpublic MyHandler myHandler() {return new MyHandler();}
}

1. 创建一个WebSocket处理器类（MyHandler），用于处理WebSocket消息。

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;public class MyHandler extends TextWebSocketHandler {@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) {// 处理接收到的文本消息System.out.println("Received message: " + message.getPayload());}@Overridepublic void onOpen(WebSocketSession session) {// 连接建立成功调用的方法System.out.println("New client connected: " + session.getPrincipal());}
}

1. 在需要使用WebSocket的地方，例如控制器类，注入WebSocketSession，并使用sendMessage方法发送消息。

以上就是在Spring Boot中使用WebSocket建立服务端的步骤。注意，还需要根据实际情况进行进一步的配置和开发。

使用spring-boot建立一个客户端

要使用Spring Boot建立一个客户端，可以按照以下步骤进行：

1. 确保的Spring Boot项目已经创建并配置好。
2. 在项目的pom.xml文件中，添加Spring WebSocket的依赖。

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

1. 创建一个WebSocket配置类，用于配置WebSocket客户端。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocketClient;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketClientConfigurer;
import org.springframework.web.socket.client.WebSocketClient;
import org.springframework.web.socket.client.standard.StandardWebSocketClient;
import org.springframework.web.socket.handler.TextWebSocketHandler;@Configuration
@EnableWebSocketClient
public class WebSocketClientConfig implements WebSocketClientConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(myHandler(), "/websocket/test/{sid}");}@Beanpublic WebSocketClient myWebSocketClient() {return new StandardWebSocketClient();}@Beanpublic MyHandler myHandler() {return new MyHandler();}
}

1. 创建一个WebSocket处理器类（MyHandler），用于处理WebSocket消息。

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;public class MyHandler extends TextWebSocketHandler {@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) {// 处理接收到的文本消息System.out.println("Received message: " + message.getPayload());}
}

1. 创建一个用于发送消息的控制器类。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationListener;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.social.connect.*;
import org.springframework.web.*;
import org.springframework.*;import java.util.*;@RestController("/")
@RequestMapping("/")
public class WebSocketController {@Autowiredprivate SimpMessageSendingOperations operations;@Autowiredprivate WebSocketConnectionEstablishedEvent event;public void setEvent(WebSocketConnectionEstablishedEvent event) {this.event = event;}@MessageMapping("/greet/{name}")@SendTo("/topic/greet")public String greet(@PathVariable String name) {return "Hello, " + name + "!";}@RequestMapping(value = "/error", produces = MediaType.APPLICATION_JSON_VALUE)public Map<String, Object> handleError(HttpServletRequest request) {Map<String, Object> model = new HashMap<>();model.put("timestamp", new Date());model.put("status", HttpStatusInitializer.__getHttpStatus(request, NullPointerException));model.put("error", "Internal Server Error");model.put("exception", NullPointerException.__toString());model.put("message", "Something bad happened, please try again!");model.put("path", request.__toString());return model;}@Autowiredprivate WebSocketClient myWebSocketClient;@Autowiredprivate MyHandler myHandler;@Autowiredprivate ConnectionRepository connectionRepository;@Autowiredprivate AuthenticationRepository authenticationRepository;public void sendMessageToUser(@PathVariable String name, @RequestParam String message) {Iterable<Connection<?, ?>> connections = connectionRepository.findConnections(String FacebookMarker.ID);for (Connection<?, ?> connection : connections) {if (connection.getProvider().getId().equals(String FacebookMarker.ID) && connection.getDisplayName().equals(name)) {connectionRepository.createSendToUserChannel(connection.getId()).send(MessageBuilder.withPayload(message).build());break;}}}
}

在上述代码中，我添加了一个sendMessageToUser方法，它使用connectionRepository查找与指定用户名匹配的连接，然后通过向该用户的个人通道发送消息来向该用户发送消息。请注意，这里假设您已经实现了与Facebook的连接，并且使用FacebookMarker作为提供者的标识符。可以根据需要进行相应的调整。

使用vue来订阅连接成为一个websocket客户端

要在Vue中订阅WebSocket连接并成为客户端，你可以按照以下步骤进行操作：

1. 安装WebSocket库：首先，你需要下载并安装WebSocket库。你可以使用npm或yarn来安装。在终端中运行以下命令来安装webstomp-client库：

npm install webstomp-client

1. 创建一个WebSocket连接：在Vue组件中，你需要创建一个WebSocket连接。你可以在组件的created()钩子函数中创建连接。以下是一个示例代码片段：

<template><div><!-- 组件内容 --></div>
</template><script>
import WebSocket from 'webstomp-client';export default {name: 'WebSocketClient',data() {return {socket: null,};},created() {this.initializeWebSocket();},methods: {initializeWebSocket() {this.socket = new WebSocket('wss://your-websocket-url'); // 使用你的WebSocket URLthis.socket.onconnect = () => {console.log('WebSocket connected');};this.socket.onerror = (error) => {console.error('WebSocket error:', error);};this.socket.onclose = () => {console.log('WebSocket disconnected');};this.socket.onmessage = (message) => {console.log('Received message:', message);};},},
};
</script>

在上述代码中，我们首先导入WebSocket库，并在created()钩子函数中初始化WebSocket连接。你可以将wss://your-websocket-url替换为实际的WebSocket服务器URL。然后，我们定义了连接的回调函数，包括onconnect、onerror、onclose和onmessage。这些回调函数将在相应的WebSocket事件发生时执行。 3. 处理WebSocket消息：当从WebSocket接收消息时，你可以在onmessage回调函数中处理接收到的消息。你可以根据需要执行相应的操作，例如更新Vue组件的状态或触发其他行为。在上述示例代码中，我们只是简单地打印接收到的消息。 4. 发送WebSocket消息：要发送消息到WebSocket服务器，你可以使用WebSocket的send()方法。在Vue组件中，你可以定义一个方法来发送消息，并在需要发送消息时调用该方法。以下是一个示例代码片段：

<template><div><!-- 组件内容 --><button @click="sendMessage">Send Message</button></div>
</template><script>
import WebSocket from 'webstomp-client';export default {name: 'WebSocketClient',data() {return {socket: null,};},created() {this.initializeWebSocket();},methods: {initializeWebSocket() { /* ... */ }, // WebSocket连接初始化代码省略sendMessage() {const message = 'Hello, WebSocket Server!'; // 待发送的消息内容this.socket.send(message); // 发送消息到WebSocket服务器},},
};
</script>

在上述代码中，我们添加了一个按钮，并在点击时调用sendMessage()方法。该方法使用WebSocket的send()方法发送消息到服务器。请注意，你需要将实际的消息内容替换为'Hello, WebSocket Server!'。