Springboot整合WebSocket经典案例

最新推荐文章于 2023-08-08 23:11:51 发布
最新推荐文章于 2023-08-08 23:11:51 发布
阅读量1k 收藏 6
点赞数 1
分类专栏： Java 文章标签： springboot websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSU_hjh/article/details/119139346
版权

Springboot整合WebSocket经典案例

WebSocker简介

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

案例分析

外部依赖包的导入


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

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

application配置端口

server:
  port: 9999

WebSocket配置类

package school.csu.websocketexample;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebsocketexampleApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebsocketexampleApplication.class, args);
    }

}

编写静态界面

在这里插入图片描述
页面内容及注释

<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket</title>
</head>

<body>
<input id="text" type="text" />
<!--发送消息按钮-->
<button onclick="send()">Send</button>
<!--关闭连接按钮-->
<button onclick="closeWebSocket()">Close</button>
<!--显示消息-->
<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:9999/sendMessage/one");
    } else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function() {
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event) {
        //setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function() {
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function() {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

案例一：自己给自己发送消息

相关代码以及注释讲解

package school.csu.websocketexample.component;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * 前后端交互实现消息发送给自己
 */




@Slf4j
@ServerEndpoint("/sendMessage/one")//@ServerEndpoint注解是服务端与客户端交互的关键，其值(/sendMessage/one)得与index页面中的请求路径对应。
@Component
public class OneToOneWebSocket {
    //静态变量记录当前连接数
    private static AtomicInteger onlineCount = new AtomicInteger(0);


    /**
     * 连接建立成功调用的方法
     * @param session
     */
    @OnOpen
    public void onOpen(Session session){
        onlineCount.incrementAndGet();//连接数自动+1
        //打印日志
        log.info("有新连接加入：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        onlineCount.decrementAndGet(); // 在线数减1
        log.info("有一连接关闭：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
    }


    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     *            客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服务端收到客户端[{}]的消息:{}", session.getId(), message);
        this.sendMessage("Hello, " + message, session);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    /**
     * 服务端发送消息给客户端
     */
    private void sendMessage(String message, Session toSession) {
        try {
            log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);
            toSession.getBasicRemote().sendText(message);
        } catch (Exception e) {
            log.error("服务端发送消息给客户端失败：{}", e);
        }
    }

}

效果演示
在这里插入图片描述

案例二：群发消息（不包括自己）

package school.csu.websocketexample.component;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * 
 * 前后端交互的类实现消息的接收推送(自己发送给所有人(不包括自己))
 * 
 * @ServerEndpoint(value = "/sendMessage/oneToMany") 前端通过此URI 和后端交互，建立连接
 */
@Slf4j
@ServerEndpoint(value = "/sendMessage/oneToMany")
@Component
public class OneToManyWebSocket {

    /** 记录当前在线连接数 */
    private static AtomicInteger onlineCount = new AtomicInteger(0);

    /** 存放所有在线的客户端 */
    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineCount.incrementAndGet(); // 在线数加1
        clients.put(session.getId(), session);
        log.info("有新连接加入：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        onlineCount.decrementAndGet(); // 在线数减1
        clients.remove(session.getId());
        log.info("有一连接关闭：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     *            客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服务端收到客户端[{}]的消息:{}", session.getId(), message);
        this.sendMessage(message, session);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    /**
     * 群发消息
     * 
     * @param message
     *            消息内容
     */
    private void sendMessage(String message, Session fromSession) {
        for (Map.Entry<String, Session> sessionEntry : clients.entrySet()) {
            Session toSession = sessionEntry.getValue();
            // 排除掉自己
            if (!fromSession.getId().equals(toSession.getId())) {
                log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);
                toSession.getAsyncRemote().sendText(message);
            }
        }
    }}

另外注意吧index.html的v这里也改一下

        websocket = new WebSocket("ws://localhost:9999/sendMessage/oneToMany");

演示效果（同时打开三个窗口，控制台打印如下）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例三：一对一进行发送

package school.csu.websocketexample.component;

import com.alibaba.fastjson.JSON;
import lombok.extern.slf4j.Slf4j;

/**
 * 前后端交互的类实现消息的接收推送(自己发送给另一个人)
 *
 * @ServerEndpoint(value = "/test/oneToOne") 前端通过此URI 和后端交互，建立连接
 */



import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import school.csu.websocketexample.domain.MyMessage;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;


@Slf4j
@ServerEndpoint(value = "/sendMessage/oneToAnotherOne")
@Component
public class OneToAnotherOneWebSocket {

    /** 记录当前在线连接数 */
    private static AtomicInteger onlineCount = new AtomicInteger(0);

    /** 存放所有在线的客户端 */
    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        onlineCount.incrementAndGet(); // 在线数加1
        clients.put(session.getId(), session);
        log.info("有新连接加入：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        onlineCount.decrementAndGet(); // 在线数减1
        clients.remove(session.getId());
        log.info("有一连接关闭：{}，当前在线人数为：{}", session.getId(), onlineCount.get());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     *            客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("服务端收到客户端[{}]的消息[{}]", session.getId(), message);
        try {
            MyMessage myMessage = JSON.parseObject(message, MyMessage.class);
            if (myMessage != null) {
                Session toSession = clients.get(myMessage.getUserId());
                if (toSession != null) {
                    this.sendMessage(myMessage.getMessage(), toSession);
                }
            }
        } catch (Exception e) {
            log.error("解析失败：{}", e);
        }
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    /**
     * 服务端发送消息给客户端
     */
    private void sendMessage(String message, Session toSession) {
        try {
            log.info("服务端给客户端[{}]发送消息[{}]", toSession.getId(), message);
            toSession.getBasicRemote().sendText(message);
        } catch (Exception e) {
            log.error("服务端发送消息给客户端失败：{}", e);
        }
    }

}

这里记得修改一下

        websocket = new WebSocket("ws://localhost:9999/sendMessage/oneToAnotherOne");

在这里插入图片描述
在这里插入图片描述
差不多就这些啦~之后要用到我们实际的项目呢之中去哦。

纸短勤常在
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
springboot整合websocket
02-03
springboot整合websocket
springboot-websocket:SpringBoot整合WebSocket
05-26
springboot-websocket SpringBoot整合WebSocket
springboot+websocket进度条实战
11-11
应读者要求 写个了一个简单地springboot+websocket实现进度条的demo。
SpringBoot整合WebSocket+nacos注册中心
01-07
SpringBoot整合WebSocket+nacos注册中心实现多服务通信
WebSocket介绍与结合spring boot的入门小案例
最新发布
m0_51487124的博客
08-08 117
WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接， 并进行双向数据传输。HTTP是短连接WebSocket是长连接HTTP通信是单向的，基于请求响应模式WebSocket支持双向通信HTTP和WebSocket底层都是TCP连接**思考：**既然WebSocket支持双向通信，功能看似比HTTP强大，那么我们是不是可以基于WebSocket开发所有的业务功能？
springBoot整合WebSocket实例（TCP、UDP）
Serendipity_77的博客
06-01 884
springBoot整合WebSocket
Springboot集成websocket实例
蜂蜜柚子茶
11-25 1434
一、简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 WebSocket
springboot websocket示例
feinifi的博客
08-19 926
springboot项目如果要加入websocket，只需要在普通的依赖基础上，加上spring-boot-starter-websocket即可。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>...
Spring Boot 使用 WebSocket示例
allway2的博客
02-01 1806
Introduction to WebSocket with Spring Boot | SpringHowhttps://springhow.com/spring-boot-websocket/ 让我们看看如何将 WebSocket 支持添加到 Spring Boot 应用程序中。我们将尝试创建一个简单的聊天应用程序。请注意，此实现不使用 STOMP。 什么是 WebSocket？ WebSocket 协议有助于通过单个 TCP 连接在客户端和服务器之间建立全双工双向通信。该协议与 HTTP 不同，
SpringBoot 整合WebSocket 简单实战案例
热门推荐
默默不代表沉默
06-24 5万+
先看项目目录结构： ------接下来，我们开始整合WebSocket------ 先是pom.xml添加依赖： <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket&lt...
通过实例讲解springboot整合WebSocket
08-25
主要介绍了通过实例讲解springboot整合WebSocket，WebSocket为游览器和服务器提供了双工异步通信的功能，即游览器可以向服务器发送消息，服务器也可以向游览器发送消息。,需要的朋友可以参考下
springboot+websocket+idea.zip
09-19
SpringBoot+websocket广播式应用，使用idea ，其中包括单播，广播，多播
springboot 集成websocket 案例
weixin_42584758的博客
02-10 59
下面是一个 Spring Boot 集成 WebSocket 的简单案例： 在项目中添加对 websocket 的支持，例如通过 Maven 在 pom.xml 中添加以下依赖： <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-...
Springboot的WebSocket示例
jiulanhao的博客
07-20 1125
WebSocket 什么是WebSocket              WebSocket为浏览器和服务端提供了双工异步通信的功能，即浏览器可以向服务器发送消息，服务器也可以向浏览器发送消息。WebScoket需浏览器的支持，如IE10+，Chrome13+，firefox6+，这对我们现在的浏览器来说都不是问题。               WebSocket是通过一个socket来实现双...
springboot连接websocket ---超级简单示例
夜空繁星VV
07-28 2026
在做这个demo演示的时候，需要自己搭建一个websocket服务器。application.yml的websocket连接配置。本文章做的是一个连接websocket的demo演示。springboot加载websocket的bean。在linux或者windows上用户来测试。websocket服务端代码。...
springboot集成websocket
大爱仙尊
10-21 2万+
​ 这里我们使用springboot搭建一个轻量级的websocket服务，同时提供4个入参。使用websocket服务可以轻松和微信小程序、支付宝小程序、网页就行双向通讯，非常实用方便。wss地址这里是我们自己搭建的中转服务websocket地址。参数说明。
Springboot整合Websocket案例（后端向前端主动推送消息）
冯冬冬的博客
12-26 3343
在手机上相信都有来自服务器的推送消息，比如一些及时的新闻信息，这篇文章主要就是实现这个功能，只演示一个基本的案例。使用的是websocket技术。 一、什么是websocket WebSocket协议是基于TCP的一种新的网络协议。它实现了客户端与服务器全双工通信，学过计算机网络都知道，既然是全双工，就说明了服务器可以主动发送信息给客户端。这与我们的推送技术或者是多人在线聊天的功能不谋而合。 为什...
Spring Boot 实现 WebSocket 示例
m0_71777195的博客
04-13 1581
WebSocket协议提供了一种标准化的方法，通过单个TCP连接在客户机和服务器之间建立全双工、双向的通信通道。它是一种不同于HTTP的TCP协议，但被设计为在HTTP上工作，使用端口80和443，并允许重用现有的防火墙规则。WebSocket 协议是独立的基于 TCP 协议。它与 HTTP 的唯一关系是，它的握手会被 HTTP 服务器解释为 Upgrade 请求。
Java实现杨辉三角（含递归等多种方法）
CSU_hjh的博客
04-07 3162
Hello，大家好，今天跟大家分享杨辉三角的java实现（明天分享Java日历打印，不要错过哟），关注我，每天带你了解Java的更多实际情景案例和源码哦！！！ /* 任务：从控制台获取输入的正整数n，打印带有n行的杨辉三角形 每个数字保证最少5个宽度，每行前面保证2n个宽度 杨辉三角形的特点： 第 n 行有 n 个数字； 每一行的开始和结尾数字都为 1； 从第 3 行起，除去每一行的开始和结...
springboot整合websocket的具体使用案例
06-02
下面是一个简单的Spring Boot整合WebSocket的使用案例： 1. 创建一个Spring Boot项目，添加WebSocket和Thymeleaf依赖： ```xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> ``` 2. 创建一个WebSocket配置类： ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new MyWebSocketHandler(), "/websocket").setAllowedOrigins("*"); } } ``` 3. 创建一个WebSocket处理器： ```java public class MyWebSocketHandler extends TextWebSocketHandler { private List<WebSocketSession> sessions = new ArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); session.sendMessage(new TextMessage("连接成功！")); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession s : sessions) { s.sendMessage(new TextMessage(session.getId() + ": " + message.getPayload())); } } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } } ``` 4. 创建一个Thymeleaf视图： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>WebSocket Demo</title> </head> <body> <h1>WebSocket Demo</h1> <div> <label for="msg">消息：</label> <input type="text" id="msg"/> <button onclick="sendMsg()">发送</button> </div> <div id="msgs"></div> <script> var socket = new WebSocket("ws://localhost:8080/websocket"); socket.onopen = function (event) { console.log("连接成功！"); }; socket.onmessage = function (event) { var msgs = document.getElementById("msgs"); var msg = document.createElement("p"); msg.innerText = event.data; msgs.appendChild(msg); }; socket.onclose = function (event) { console.log("连接关闭！"); }; function sendMsg() { var msg = document.getElementById("msg").value; socket.send(msg); } </script> </body> </html> ``` 5. 运行项目，访问Thymeleaf视图，在浏览器的控制台可以看到连接成功的日志。在输入框中输入消息，点击发送按钮，可以在页面上看到接收到的消息。 以上就是一个简单的Spring Boot整合WebSocket的使用案例，可以根据实际需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值