SpringBoot集成WebSocket

项目结构图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRd8ZkqJ-1693291730114)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829143057984.png)]$

项目架构图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Dz61vLO-1693291730115)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829143146449.png)]$

前端项目

socket.js 注意前端这里的端口是9000, 路劲是ws开头

function createScoket(token){
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        var host = window.location.origin.replace("http:","ws:")
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket(host+":9000/ws/"+token);
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(result) {
            console.log("客户端收到服务端发送的消息: " + result);
            console.log("result.data: " + result.data);
        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("Socket发生了错误");
        }
        //窗口关闭
        $(window).unload(function(event){
            socket.close();
        });
    }
    return socket;
}
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

index1.html 创建socket唯一标识就是, 后端会把它当做key

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端Atitle>
    <script src="jquery.js">script>
    <script src="socket.js">script>
    <script>
        var socket;
        function connect() {
            if (!socket) {
                // 建立socket链接的唯一标识
                socket = createScoket("123");
            }

        }

        function sendMessage() {
            var content = $("#content").val();
            socket.send(content);
        }
    script>
head>
<body>
<input type="button" value="链接服务器" onclick="connect()" /> <br>
<input type="text" id="content"> <input type="button" value="发送消息" onclick="sendMessage()" />
body>
html>
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

index2.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端Btitle>
    <script src="jquery.js">script>
    <script src="socket.js">script>
    <script>
        var socket;
        function connect() {
            if (!socket) {
                // 建立socket链接的唯一标识
                socket = createScoket("234");
            }

        }

        function sendMessage() {
            var content = $("#content").val();
            socket.send(content);
        }
    script>
head>
<body>
<input type="button" value="链接服务器" onclick="connect()" /> <br>
<input type="text" id="content"> <input type="button" value="发送消息" onclick="sendMessage()" />
body>
html>
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

后端项目

需要引入websocket的依赖

<dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-websocketartifactId>
dependency>
1
2
3
4

WebSocketServer.class 这里编写websocket根据前端做长连接的接口地址

@OnOpen 建立socket链接
@OnMessage 接收客户端发送的消息
@OnClose 关闭socket链接
@OnError socket异常信息

package com.xiaoge;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.ConcurrentHashMap;

/**
 * todo 类里面这几个方法注解事件, 对应着前端相同的事件
 */
@ServerEndpoint("/ws/{token}")  // 这个注解相当于RequestMapping, 写路径, 这个路径跟前端约定好的, 可以看前端项目的socket.js文件里面的createScoket方法
@Component
public class WebSocketServer {
    private Session session;
    public static ConcurrentHashMap<String,Session> clients = new ConcurrentHashMap<>();

    /**
     * 建立socket链接
     * @param session
     * @param token
     */
    @OnOpen
    public void onOpen(Session session, @PathParam( "token") String token){
        // 建立和浏览器的会话映射关系
        System.out.println("浏览器和服务器建立连接");
        clients.put(token,session);
    }

    /**
     * 接收客户端发送的消息
     * @param msg
     */
    @OnMessage
    public void onMessage(@PathParam( "token") String token, String msg) {
        System.out.println("收到客户端标识为: "+ token +"发送的消息: " + msg);
    }

    /**
     * 关闭socket链接
     * @param token
     */
    @OnClose
    public void onClose(@PathParam( "token") String token){
        System.out.println("浏览器和服务器断开连接");
        clients.remove(token);
    }

    /**
     * socket报错
     *
     * @param error
     */
    @OnError
    public void onError(Throwable error) {
        error.printStackTrace();
    }
}
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

启动类型上, 把ServerEndpointExporter注入到IOC, 就会扫描我们贴了@ServerEndpoint注解的类, 把它的地址发布出去

package com.xiaoge;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * TODO
 *
 * @author Zhang Xiao
 * @since
 */
@SpringBootApplication
public class WebsocketServerApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebsocketServerApplication.class, args);
    }


    /**
     * 扫描我们贴了@ServerEndpoint注解的类, 把它的地址发布出去
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}
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

MessageController.class 通过这个/sendMsg接口对跟socket长连接的前端通信

package com.xiaoge;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.websocket.Session;
import java.io.IOException;

/**
 * TODO
 *
 * @author Zhang Xiao
 * @since
 */
@RestController
public class MessageController {


    /**
     * todo 访问这个接口的时候, websocket就会给跟websocket建立连接的客户变标识为token的发送消息
     * @param token
     * @param msg
     * @return
     * @throws IOException
     */
    @GetMapping("/sendMsg")
    public String sendMessage(String token, String msg) throws IOException {
        Session session = WebSocketServer.clients.get(token);
        // 正常应该需要判断session是否为空, 但是我这里就不判断了
        session.getBasicRemote().sendText(msg);
        return "消息发送成功!";
    }

}

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

演示

客户端A/B链接后端socket

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmHOI7cN-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144515875.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvPJ1jBP-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144559640.png)]$

客户端A/B给socket发送消息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMBsES98-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144653456.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WD2Bevx1-1693291730116)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144707202.png)]$

后端给前端发送消息

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2lGIV7y-1693291730117)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144752955.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wPARSEiq-1693291730117)(C:\Users\13301\AppData\Roaming\Typora\typora-user-images\image-20230829144823572.png)]$

应对很多的Socket链接应该怎么应对?

在这里插入图片描述
客户端通过nginx, 使用ip_hash到对应的webSocket服务, 应用程序通过mq广播模式发送到每一台webSocket服务, 总有一台是保存了, 对应的用户长连接的, 它会把消息通知给前端。
客户端不是关闭浏览器, 那样socket就没有被删除, 它只是断网了, 你不知道它还需不需要这个socket, 长此以往下去, 容易内存溢出, 这时候就需要心跳机制, 每隔一段时间发送一次心跳, 更新心跳时间, 这样就知道那些socket有用, 那些socket没用, 这样就可以把对应的socket链接删除。

demo地址: https://download.csdn.net/download/zsx1314lovezyf/88269081?spm=1001.2014.3001.5503

相关阅读:
科研教育「双目视觉技术」首选！维视MV-VS220双目立体视觉系统开发平台
 getline的使用详解
 随机分布单向长纤维-复合材料RVE模型-abaqus-python二次开发（上）
【Echarts多种曲线实例】Echarts多条曲线不同时间轴对比（附代码）
React项目-Cesium地图初始化
 分类预测 | MATLAB实现POA-CNN鹈鹕算法优化卷积神经网络多特征分类预测
 如何优化工业5G网关的网络信号
 Day03---常用的全局配置项---window里面的所有内容
 MySQL数据库入门到精通6--进阶篇(锁)
解析java中的return关键字
原文地址：https://blog.csdn.net/zsx1314lovezyf/article/details/132561394