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>
  3. 创建一个WebSocket配置类,用于配置WebSocket服务器。

java 复制代码
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消息。
java 复制代码
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>
  3. 创建一个WebSocket配置类,用于配置WebSocket客户端。

java 复制代码
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消息。
java 复制代码
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. 创建一个用于发送消息的控制器类。
java 复制代码
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<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;
    }

    @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<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

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

html 复制代码
<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。然后,我们定义了连接的回调函数,包括onconnectonerroroncloseonmessage。这些回调函数将在相应的WebSocket事件发生时执行。 3. 处理WebSocket消息:当从WebSocket接收消息时,你可以在onmessage回调函数中处理接收到的消息。你可以根据需要执行相应的操作,例如更新Vue组件的状态或触发其他行为。在上述示例代码中,我们只是简单地打印接收到的消息。 4. 发送WebSocket消息:要发送消息到WebSocket服务器,你可以使用WebSocket的send()方法。在Vue组件中,你可以定义一个方法来发送消息,并在需要发送消息时调用该方法。以下是一个示例代码片段:

html 复制代码
<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!'

相关推荐
hrrrrb2 小时前
【TCP/IP】12. 文件传输协议
服务器·网络·tcp/ip
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
网安小白的进阶之路5 小时前
A模块 系统与网络安全 第四门课 弹性交换网络-2
网络·安全·web安全·系统安全·交换机
安全系统学习5 小时前
网络安全之RCE分析与利用详情
服务器·网络·安全·web安全·系统安全
武汉唯众智创5 小时前
网络安全实训室建设方案全攻略
网络·安全·web安全·网络安全·网络安全实训室·网络安全实验室
啟明起鸣6 小时前
【网络编程】简易的 p2p 模型,实现两台虚拟机之间的简单点对点通信,并以小见大观察 TCP 协议的具体运行
c语言·网络·tcp/ip·p2p
追烽少年x6 小时前
设计模式---观察者模式(发布-订阅模式)
网络·设计模式
宝山哥哥8 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
专注VB编程开发20年8 小时前
常见 HTTP 方法的成功状态码200,204,202,201
开发语言·网络协议·tcp/ip·http
Dsocc9 小时前
TCP 动态选路协议全面研究:OSPF、BGP 与 IS-IS 的比较与应用分析
网络·网络协议·tcp/ip