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

阿丹:

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

WebSocket在线测试工具

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

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

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

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

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

    org.springframework.boot
    spring-boot-starter-websocket

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 {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/websocket/test/{sid}");
    }

    @Bean
    public 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 {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        // 处理接收到的文本消息
        System.out.println("Received message: " + message.getPayload());
    }

    @Override
    public 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的依赖。

    org.springframework.boot
    spring-boot-starter-websocket

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 {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/websocket/test/{sid}");
    }

    @Bean
    public WebSocketClient myWebSocketClient() {
        return new StandardWebSocketClient();
    }

    @Bean
    public 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 {

    @Override
    public 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 {

    @Autowired
    private SimpMessageSendingOperations operations;

    @Autowired
    private 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 handleError(HttpServletRequest request) {
        Map 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;
    }

    @Autowired
    private WebSocketClient myWebSocketClient;

    @Autowired
    private MyHandler myHandler;

    @Autowired
    private ConnectionRepository connectionRepository;

    @Autowired
    private AuthenticationRepository authenticationRepository;

    public void sendMessageToUser(@PathVariable String name, @RequestParam String message) {
        Iterable> 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()钩子函数中创建连接。以下是一个示例代码片段：

在上述代码中，我们首先导入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组件中，你可以定义一个方法来发送消息，并在需要发送消息时调用该方法。以下是一个示例代码片段：

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