WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用本文视频以及相关资源关于WebSocket客户端服务端结果展示

87 阅读 0 评论 58 点赞

我是靠谱客的博主俊秀身影，这篇文章主要介绍WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用本文视频以及相关资源关于WebSocket客户端服务端结果展示，现在分享给大家，希望可以做个参考。

WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用

本文视频以及相关资源
关于WebSocket
- 文档
- 什么时候使用WebSocket
- WebSocket连接头
- 服务器返回状态码
客户端
- 使用技术
- Github地址
- npm安装
- - 为什么要安装sockjs的.d.ts文件
- 常用方法
- - 1.连接
  - 2.关闭连接
  - 3.发送消息
  - 4.设置订阅
- 构建
- - 1.创建webSocket.ts
  - 2.完整构建
  - 3.页面逻辑
服务端
- 技术
- 文档地址
- 构建
- - 1.引入依赖
  - 2.构建WebSocketConfig
  - - 解释
  - 3.构建两个实体类
  - - Greeting
    - Hello
  - 4.设置yaml
  - 5.构建web控制器
结果展示

本文视频以及相关资源

视频链接
前端Vue3标准化模板
Spring官方案例

关于WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

文档

https://docs.spring.io/spring-framework/docs/5.3.24/reference/html/web.html#websocket

什么时候使用WebSocket

延迟本身不是决定因素。如果消息量相对较低（例如，监视网络故障），HTTP流或轮询可以提供有效的解决方案。

低延迟、高频率和高容量的组合，是使用WebSocket的最佳选择。

WebSocket连接头

复制代码

1
2
3
4
5
6
7
8
9
GET /spring-websocket-portfolio/portfolio HTTP/1.1
Host: localhost:8080
Upgrade: websocket 
Connection: Upgrade 
Sec-WebSocket-Key: Uc9l9TMkWGbHFD2qnFHltg==
Sec-WebSocket-Protocol: v10.stomp, v11.stomp
Sec-WebSocket-Version: 13
Origin: http://localhost:8080

服务器返回状态码

具有WebSocket支持的服务器返回类似于以下内容的输出，而不是通常的200状态代码

复制代码

1
2
3
4
5
6
HTTP/1.1 101 Switching Protocols 
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 1qVdfYHU9hPOl4JYYNXF623Gzn0=
Sec-WebSocket-Protocol: v10.stomp

客户端

使用技术

SocketJS
StompJS
Vue3
TypeScript
Setup语法

Github地址

https://github.com/sockjs/sockjs-client
https://github.com/jmesnil/stomp-websocket

npm安装

复制代码

1
2
3
4
5
6
7
8
npm install sockjs-client@1.6.1 
//安装sockjs的.d.ts文件
npm i --save-dev @types/sockjs-client
//安装stomp
npm install stompjs
npm i --save-dev @types/stompjs
npm i net -S

为什么要安装sockjs的.d.ts文件

我们使用的ts代替了js，在ts中直接引入使用js是不能被识别的，这时候就需要有一个.d.ts的声明文件，显然原始的SockJS库中并没有这个文件，所以我们需要自己去下载一个，当然你要是厉害可以自己写一个。
不然在ts中会报找不到SockJS模块的错误

常用方法

1.连接

复制代码

1
2
3
4
connect(headers: { login: string, passcode: string, host?: string | undefined }, connectCallback: (frame?: Frame) => any, errorCallback?: (error: Frame | string) => any): any;
connect(headers: { }, connectCallback: (frame?: Frame) => any, errorCallback?: (error: Frame | string) => any): any;
connect(login: string, passcode: string, connectCallback: (frame?: Frame) => any, errorCallback?: (error: Frame | string) => any, host?: string): any;

2.关闭连接

复制代码

1
2
disconnect(disconnectCallback: () => any, headers?: {}): any;

3.发送消息

复制代码

1
2
send(destination: string, headers?: {}, body?: string): any;

4.设置订阅

复制代码

1
2
subscribe(destination: string, callback?: (message: Message) => any, headers?: {}): Subscription;

构建

1.创建webSocket.ts

复制代码

1
2
3
4
//引入使用SockJS
import SockJS from "sockjs-client";
import Stomp from "stompjs";

2.完整构建

复制代码

//引入使用SockJS
import SockJS from "sockjs-client";
import Stomp from "stompjs";
//请求地址
const baseUrl = "http://localhost:9000/port";
//请求头
const header = {};
//stomp客户端
let stompClient: Stomp.Client;
//连接状态
let connetStatus = false;
/**
 * 初始化连接
 */
export const initSocket = () => {
  con();
  setInterval(() => {
    //根据连接状态
    if (connetStatus) {
      try {
        //发送请求
        stompClient.send(
          "/app/hello",
          header,
          JSON.stringify({ name: "wangau" })
        );
      } catch (error) {
        con();
      }
    }
  }, 10000);
};
/**
 * 连接
 */
export const con = () => {
  let socket = new SockJS(baseUrl);

stompClient = Stomp.over(socket);

/**
 * 断开
 */
export const close = () => {
  if (stompClient) {
    stompClient.disconnect(() => {
      console.log("============connect release============");
      connetStatus = false;
    });
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
//引入使用SockJS
import SockJS from "sockjs-client";
import Stomp from "stompjs";
//请求地址
const baseUrl = "http://localhost:9000/port";
//请求头
const header = {};
//stomp客户端
let stompClient: Stomp.Client;
//连接状态
let connetStatus = false;
/**
 * 初始化连接
 */
export const initSocket = () => {
  con();
  setInterval(() => {
    //根据连接状态
    if (connetStatus) {
      try {
        //发送请求
        stompClient.send(
          "/app/hello",
          header,
          JSON.stringify({ name: "wangau" })
        );
      } catch (error) {
        con();
      }
    }
  }, 10000);
};
/**
 * 连接
 */
export const con = () => {
  let socket = new SockJS(baseUrl);

  stompClient = Stomp.over(socket);

  let header = {};
  stompClient.connect(
    header,
    () => {
      console.log("===========connect success===========");
      connetStatus = true;
      //设置订阅
      stompClient.subscribe(
        "/topic/greetings",
        (res: any) => {
          console.log(res);
        },
        header
      );
    },
    (err: any) => {
      console.log("error");
      console.log(err);
    }
  );
};

/**
 * 断开
 */
export const close = () => {
  if (stompClient) {
    stompClient.disconnect(() => {
      console.log("============connect release============");
      connetStatus = false;
    });
  }
};

3.页面逻辑

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div id="index_container">
    <!-- 使用图标库示例 -->
    <i class="iconfont icon-smile-fill "></i>
    <el-button type="primary" @click="closeCon">关闭</el-button>
  </div>
</template>

<script lang="ts" setup>
import { initSocket, close } from '@/request/webSocket/webSocket'
import { ref, reactive, onMounted } from 'vue'
const closeCon = () => {
  close()
}

onMounted(() => {
  initSocket()
})
</script>

<style lang="scss" scoped>
@use './Index.scss';
#index_container {
  height: 100vh;
  width: 100vw;
}
</style>

服务端

技术

spring-boot-starter-websocket
SpringBoot2.7.6
STOMP

文档地址

https://docs.spring.io/spring-framework/docs/5.3.24/reference/html/web.html#websocket-stomp

构建

1.引入依赖

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

2.构建WebSocketConfig

复制代码

package com.example.stomp.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @author Syf200208161018
 * @date 2022/12/11 11:11
 * @ClassName:WebSocketConfig
 * @Effect:WebSocketConfig is used for
 * /port是WebSocket（或SockJS）指向的端点的HTTP URL
 * 客户端需要连接以进行WebSocket握手。
 * 目标标头以/app开头的STOMP消息被路由到
 * @Controller类中的MessageMapping方法。
 * 使用内置的消息代理进行订阅和广播
 * 将目标标头以/topic或/queue开头的消息路由到代理。
 */
@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

@Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/port").setAllowedOriginPatterns("*").withSockJS();
    }

@Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic","/queue");
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package com.example.stomp.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @author Syf200208161018
 * @date 2022/12/11 11:11
 * @ClassName:WebSocketConfig
 * @Effect:WebSocketConfig is used for
 * /port是WebSocket（或SockJS）指向的端点的HTTP URL
 * 客户端需要连接以进行WebSocket握手。
 * 目标标头以/app开头的STOMP消息被路由到
 * @Controller类中的MessageMapping方法。
 * 使用内置的消息代理进行订阅和广播
 * 将目标标头以/topic或/queue开头的消息路由到代理。
 */
@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/port").setAllowedOriginPatterns("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic","/queue");
    }
}

解释

使用@EnableWebSocketMessageBroker开启WebSocket的子协议STOMP，配置类需要实现WebSocketMessageBrokerConfigurer接口，重写其中的注册STOMP节点方法和配置信息代理者方法

在注册STOMP节点方法中我们需要：

添加监听节点addEndpoint
设置跨域setAllowedOriginPatterns
设置使用SockJSwithSockJS（你也可以选择使用原生方式）

配置信息代理者中需要：

设置目的地前缀setApplicationDestinationPrefixes
设置代理者（代理者对应订阅者）

3.构建两个实体类

Greeting

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.example.stomp.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**
 * @author Syf200208161018
 * @date 2022/12/11 14:10
 * @ClassName:Greeting
 * @Effect:Greeting is used for
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Greeting  implements Serializable {
    private String content;
}

Hello

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.example.stomp.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**
 * @author Syf200208161018
 * @date 2022/12/11 14:10
 * @ClassName:Hello
 * @Effect:Hello is used for
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Hello implements Serializable {
    private String name;
}

4.设置yaml

复制代码

1
2
3
server:
  port: 9000

5.构建web控制器

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package com.example.stomp.controller;

import com.example.stomp.entity.Greeting;
import com.example.stomp.entity.Hello;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author Syf200208161018
 * @date 2022/12/11 14:11
 * @ClassName:TestController
 * @Effect:TestController is used for
 */
@RestController
public class TestController {

//    @MessageMapping("/hello")
//    @SendTo("/topic/greetings")
//    public Greeting greeting(){
//        return new Greeting("hello!");
//    }

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(Hello hello){
        return new Greeting(hello.getName());
    }
}

结果展示

在这里插入图片描述

最后

以上就是俊秀身影最近收集整理的关于WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用本文视频以及相关资源关于WebSocket客户端服务端结果展示的全部内容，更多相关WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用本文视频以及相关资源关于WebSocket客户端服务端结果展示内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：笔记
浏览次数：87 次浏览
发布日期：2023-10-02 09:16:19
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzogfz_12__23__26_5.html

WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用本文视频以及相关资源关于WebSocket客户端服务端结果展示

WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用

本文视频以及相关资源

关于WebSocket

文档

什么时候使用WebSocket

WebSocket连接头

服务器返回状态码

客户端

使用技术

Github地址

npm安装

为什么要安装sockjs的.d.ts文件

常用方法

1.连接

2.关闭连接

3.发送消息

4.设置订阅

构建

1.创建webSocket.ts

2.完整构建

3.页面逻辑

服务端

技术

文档地址

构建

1.引入依赖

2.构建WebSocketConfig

解释

3.构建两个实体类

Greeting

Hello

4.设置yaml

5.构建web控制器

结果展示

最后

评论列表共有 0 条评论

发表评论取消回复

WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用本文视频以及相关资源关于WebSocket客户端服务端结果展示

WebSocket——SpringBoot+Vue3+TS+SockJS+STOMP简单连接使用

本文视频以及相关资源

关于WebSocket

文档

什么时候使用WebSocket

WebSocket连接头

服务器返回状态码

客户端

使用技术

Github地址

npm安装

为什么要安装sockjs的.d.ts文件

常用方法

1.连接

2.关闭连接

3.发送消息

4.设置订阅

构建

1.创建webSocket.ts

2.完整构建

3.页面逻辑

服务端

技术

文档地址

构建

1.引入依赖

2.构建WebSocketConfig

解释

3.构建两个实体类

Greeting

Hello

4.设置yaml

5.构建web控制器

结果展示

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复