SpringBoot 使用WebSocket功能(实现步骤)

 更新时间:2024年02月05日 09:42:18   作者:清山博客  
本文通过详细步骤介绍了SpringBoot 使用WebSocket功能,首先需要导入WebSocket坐标,编写WebSocket配置类,用于注册WebSocket的Bean,结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

实现步骤:

1.导入WebSocket坐标。

在pom.xml中增加依赖项:

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.编写WebSocket配置类,用于注册WebSocket的Bean。

package com.rc114.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
 * WebSocket配置类,用于注册WebSocket的Bean
 * @author Administrator
 */
@Configuration
public class WebSocketConfiguration {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3.编写WebSocketServer类。

package com.rc114.websocket;
import jakarta.websocket.OnClose;
import jakarta.websocket.OnMessage;
import jakarta.websocket.OnOpen;
import jakarta.websocket.Session;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
/**
 * WebSocket服务
 * @author Administrator
 */
@Component  //  交给spring容器管理
@ServerEndpoint("/ws/{sid}")    //  路径请求
public class WebSocketServer {
    //存放会话对象
    private static Map<String, Session> sessionMap = new HashMap();
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid) {
        System.out.println("客户端:" + sid + "建立连接");
        sessionMap.put(sid, session);
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, @PathParam("sid") String sid) {
        System.out.println("收到来自客户端:" + sid + "的信息:" + message);
    }
    /**
     * 连接关闭调用的方法
     *
     * @param sid
     */
    @OnClose
    public void onClose(@PathParam("sid") String sid) {
        System.out.println("连接断开:" + sid);
        sessionMap.remove(sid);
    }
    /**
     * 群发
     *
     * @param message
     */
    public void sendToAllClient(String message) {
        Collection<Session> sessions = sessionMap.values();
        for (Session session : sessions) {
            try {
                //服务器向客户端发送消息
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

4.测试WebSocket

编写一个测试WebSocket的html页面:

<html>
<head>
    <title>WebSocket测试页面</title>
    <style type="text/css">
        * {
            font-size: 14px;
            line-height: 22px;
        }
        .main {
            border: 0px solid #ccc;
            width: 60%;
            margin: 0 auto;
            padding: 10px;
        }
        .main-table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        .main-table td {
            border: 1px solid #ccc;
            padding: 5px;
        }
        .td-left {
            text-align: right;
        }
        input[type="text"] {
            border: 1px solid #ccc;
            padding: 5px;
            outline: none;
            width: 200px;
        }
        input[type="button"] {
            border: 1px solid #ccc;
            padding: 3px 10px;
            outline: none;
        }
        .green {
            color: green;
        }
        .red {
            color: red;
        }
        #msg {
            font-size: 12px;
            line-height: 22px;
        }
    </style>
</head>
<body>
    <div class="main">
        <table class="main-table">
            <tr>
                <td colspan="2" style=" text-align: center;font-weight: bold;">WebSocket测试</td>
            </tr>
            <tr>
                <td style="width: 100px;" class="td-left">服务器地址</td>
                <td><input type="text" id="server" value="ws://localhost:8080/ws/"></td>
            </tr>
            <tr>
                <td class="td-left">客户端名称</td>
                <td><input type="text" id="clientId">
                    <input type="button" value="随机生成" onclick="GenerateClientId()" />
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <input type="button" value="连接" onclick="ConnectServer()" />
                </td>
            </tr>
            <tr>
                <td class="td-left">连接状态</td>
                <td> <span id="status"><span class='red'>未连接</span></span></td>
            </tr>
            <tr>
                <td class="td-left">发送消息</td>
                <td>
                    <input type="text" id="txt">
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <input type="button" value="发送" onclick="SendMsg()" />
                    <input type="button" value="清空" onclick="ClearLog()" />
                </td>
            </tr>
            <tr>
                <td class="td-left">日志</td>
                <td>
                    <div id="msg"></div>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            var websocket = null;
            var clientId = "";
            //随机生成客户端编号
            function GenerateClientId() {
                clientId = Math.random().toString().substr(2);
                document.getElementById("clientId").value = clientId;
            }
            GenerateClientId();
            //连接到服务器
            function ConnectServer() {
                var clientId = document.getElementById("clientId").value;
                if (clientId == "") {
                    alert("客户端编号不能为空!");
                } else {
                    if ("WebSocket" in window) {
                        websocket = new WebSocket("ws://localhost:8080/ws/" + clientId);
                        websocket.onerror = function () {
                            ShowMsg("<span class='red'>ERROR</span>");
                        }
                        websocket.onopen = function () {
                            document.getElementById("status").innerHTML = "<span class='green'>已连接</span>";
                            ShowMsg("<span class='green'>连接成功!</span>");
                        }
                        websocket.onmessage = function (event) {
                            ShowMsg(event.data);
                        }
                        websocket.onclose = function () {
                            ShowMsg("<span class='red'>断开连接</span>");
                        }
                    }
                    else {
                        alert("NOT SUPPORT WEBSOCKET!");
                    }
                }
            }
            //网页关闭时,断开链接
            window.onbeforeunload = function () {
                websocket.close();
            }
            //显示日志
            function ShowMsg(msg) {
                document.getElementById("msg").innerHTML += Now() + " " + msg + "<br/>";
            }
            //发送消息
            function SendMsg() {
                var txt = document.getElementById("txt").value;
                websocket.send(txt);
                ShowMsg("<span class='green'>发送消息:" + txt + "</span>");
            }
            //断开链接
            function closeWebSocket() {
                websocket.close();
            }
            function Now() {
                const date = new Date();
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hour = date.getHours().toString().padStart(2, '0');
                const minute = date.getMinutes().toString().padStart(2, '0');
                const second = date.getSeconds().toString().padStart(2, '0');
                const format = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
                return format;
            }
            //清空日志
            function ClearLog() {
                document.getElementById("msg").innerHTML = "";
            }
        </script>
    </div>
</body>
</html>

运行效果:

注意:

如果使用了Nginx转发请求的,需在Nginx配置WebSocket的转发规则。

到此这篇关于SpringBoot 使用WebSocket功能的文章就介绍到这了,更多相关SpringBoot 使用WebSocket内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决 java: 程序包com.baomidou.mybatisplus.annotation不存在

    解决 java: 程序包com.baomidou.mybatisplus.annotation不存在

    在使用Java编写程序时,经常会遇到各种编译错误或运行时异常,本文主要介绍了解决java:程序包com.baomidou.mybatisplus.annotation不存在,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • java中如何使用泛型方法比较大小

    java中如何使用泛型方法比较大小

    这篇文章主要介绍了java中如何使用泛型方法比较大小,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Java synchronized关键_动力节点Java学院整理

    Java synchronized关键_动力节点Java学院整理

    在java中,每一个对象有且仅有一个同步锁。这也意味着,同步锁是依赖于对象而存在。下面通过本文给大家介绍synchronized原理 及基本规则,感兴趣的朋友一起学习吧
    2017-05-05
  • java实现微信公众号发送模版消息

    java实现微信公众号发送模版消息

    这篇文章以订单推送为例,主要为大家详细介绍了java实现微信公众号发送模版消息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • HashMap之keyset()方法底层原理解读

    HashMap之keyset()方法底层原理解读

    这篇文章主要介绍了HashMap之keyset()方法底层原理解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Java遍历Properties所有元素的方法实例

    Java遍历Properties所有元素的方法实例

    这篇文章主要介绍了Java如何遍历Properties所有元素的方法,大家可以参考使用
    2013-11-11
  • Java多线程之线程状态详解

    Java多线程之线程状态详解

    这篇文章主要介绍了Java多线程 线程状态原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • Spring mvc如何实现数据处理

    Spring mvc如何实现数据处理

    这篇文章主要介绍了Spring mvc如何实现数据处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 详解Java中缀表达式的实现

    详解Java中缀表达式的实现

    中缀表达式是一个通用的算术或逻辑公式表示方法。,中缀表达式不容易被计算机解析,但仍被许多程序语言使用,因为它符合人们的普遍用法。本文介绍了实现中缀表达式的方法,需要的可以参考一下
    2022-07-07
  • Gradle的基本使用

    Gradle的基本使用

    这篇文章主要介绍了Gradle的基本使用方法,帮助大家更好的理解和学习Gradle的相关知识,感兴趣的朋友可以了解下
    2021-03-03

最新评论