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

<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 {
 
    @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()钩子函数中创建连接。以下是一个示例代码片段：

<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 URL
      this.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 Messagebutton>
  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!'。