集成websocket实现实时通信(ruoyi 使用笔记)

news2024/12/23 7:36:47

集成websocket实现实时通信(ruoyi 使用笔记

  • 1.简单介绍WebSocket
  • 2.详细代码
    • 2.1WebSocketConfig
    • 2.2 SemaphoreUtils
    • 2.3 WebSocketServer
    • 2.4 WebSocketUsers
    • 2.5 html
    • 2.6 vue版本前端代码
    • 2.7 controller

1.简单介绍WebSocket

Websocket 是一种基于 TCP 协议的全双工通信协议,它使得客户端和服务器之间可以进行实时的双向通信。相对于传统的 HTTP 协议只能通过客户端发送请求,然后等待服务端的响应,WebSocket 可以让客户端和服务器在任何时候都可以相互发送消息,这种实时通信的方式非常适合需要实时更新数据的应用场景,比如聊天室、在线游戏、股票行情等。

WebSocket 的运作流程如下:

客户端向服务器发起 WebSocket 握手请求;
服务器返回确认信息给客户端,完成握手;
握手成功后,客户端和服务器就可以通信了;
双方可以随时发送消息到对方,也可以关闭连接。

WebSocket 的好处包括:

实时性:WebSocket 提供了双向通信能力,可以实现实时更新数据的功能;
可靠性:WebSocket 基于 TCP 协议,可以保证消息传输的可靠性;
性能高:WebSocket 的开销小,通信效率高,不会频繁地进行连接、断开等操作,降低网络延迟;
跨域支持:WebSocket 支持跨域通信,可以在不同的域之间建立连接。

在前端开发中,使用 WebSocket 可以使用 JavaScript WebSocket API 来进行操作,常见的库包括 Socket.io 和 WebSocket-Node 等。在后端开发中,WebSocket 的实现可以使用 Node.js、Java、Python 等多种语言和框架。

当然,在使用 WebSocket 时也需要考虑一些安全问题,比如避免跨站脚本攻击(XSS)、防范恶意请求等。

若依网址点击即可;
在这里插入图片描述
链接: https://pan.baidu.com/s/13JVC9jm-Dp9PfHdDDylLCQ 提取码: y9jt

2.详细代码

(大家可以去若依下载我自己做下记录而已)

2.1WebSocketConfig

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * websocket 配置
 * 
 * @author ruoyi
 */
@Configuration
public class WebSocketConfig
{
    @Bean
    public ServerEndpointExporter serverEndpointExporter()
    {
        return new ServerEndpointExporter();
    }
}

2.2 SemaphoreUtils

import java.util.concurrent.Semaphore;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * 信号量相关处理
 * 
 * @author ruoyi
 */
public class SemaphoreUtils
{

    /**
     * SemaphoreUtils 日志控制器
     */
    private static final Logger LOGGER = LoggerFactory.getLogger(SemaphoreUtils.class);

    /**
     * 获取信号量
     * 
     * @param semaphore
     * @return
     */
    public static boolean tryAcquire(Semaphore semaphore)
    {
        boolean flag = false;

        try
        {
            flag = semaphore.tryAcquire();
        }
        catch (Exception e)
        {
            LOGGER.error("获取信号量异常", e);
        }

        return flag;
    }

    /**
     * 释放信号量
     * 
     * @param semaphore
     */
    public static void release(Semaphore semaphore)
    {

        try
        {
            semaphore.release();
        }
        catch (Exception e)
        {
            LOGGER.error("释放信号量异常", e);
        }
    }
}

2.3 WebSocketServer



import java.util.concurrent.Semaphore;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import com.lxh.demo.util.SemaphoreUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

/**
 * websocket 消息处理
 * 
 * @author ruoyi
 */
@Component
@ServerEndpoint("/websocket/message")
public class WebSocketServer
{
    /**
     * WebSocketServer 日志控制器
     */
    private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketServer.class);

    /**
     * 默认最多允许同时在线人数100
     */
    public static int socketMaxOnlineCount = 100;

    private static Semaphore socketSemaphore = new Semaphore(socketMaxOnlineCount);

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) throws Exception
    {
        boolean semaphoreFlag = false;
        // 尝试获取信号量
        semaphoreFlag = SemaphoreUtils.tryAcquire(socketSemaphore);
        if (!semaphoreFlag)
        {
            // 未获取到信号量
            LOGGER.error("\n 当前在线人数超过限制数- {}", socketMaxOnlineCount);
            WebSocketUsers.sendMessageToUserByText(session, "当前在线人数超过限制数:" + socketMaxOnlineCount);
            session.close();
        }
        else
        {
            // 添加用户
            WebSocketUsers.put(session.getId(), session);
            LOGGER.info("\n 建立连接 - {}", session);
            LOGGER.info("\n 当前人数 - {}", WebSocketUsers.getUsers().size());
            WebSocketUsers.sendMessageToUserByText(session, "连接成功");
        }
    }

    /**
     * 连接关闭时处理
     */
    @OnClose
    public void onClose(Session session)
    {
        LOGGER.info("\n 关闭连接 - {}", session);
        // 移除用户
        WebSocketUsers.remove(session.getId());
        // 获取到信号量则需释放
        SemaphoreUtils.release(socketSemaphore);
    }

    /**
     * 抛出异常时处理
     */
    @OnError
    public void onError(Session session, Throwable exception) throws Exception
    {
        if (session.isOpen())
        {
            // 关闭连接
            session.close();
        }
        String sessionId = session.getId();
        LOGGER.info("\n 连接异常 - {}", sessionId);
        LOGGER.info("\n 异常信息 - {}", exception);
        // 移出用户
        WebSocketUsers.remove(sessionId);
        // 获取到信号量则需释放
        SemaphoreUtils.release(socketSemaphore);
    }

    /**
     * 服务器接收到客户端消息时调用的方法
     */
    @OnMessage
    public void onMessage(String message, Session session)
    {
        String msg = message.replace("你", "我").replace("吗", "");
        WebSocketUsers.sendMessageToUserByText(session, msg);
    }
}

2.4 WebSocketUsers


import java.io.IOException;
import java.util.Collection;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.Session;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * websocket 客户端用户集
 * 
 * @author ruoyi
 */
public class WebSocketUsers
{
    /**
     * WebSocketUsers 日志控制器
     */
    private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketUsers.class);

    /**
     * 用户集
     */
    private static Map<String, Session> USERS = new ConcurrentHashMap<String, Session>();

    /**
     * 存储用户
     *
     * @param key 唯一键
     * @param session 用户信息
     */
    public static void put(String key, Session session)
    {
        USERS.put(key, session);
    }

    /**
     * 移除用户
     *
     * @param session 用户信息
     *
     * @return 移除结果
     */
    public static boolean remove(Session session)
    {
        String key = null;
        boolean flag = USERS.containsValue(session);
        if (flag)
        {
            Set<Map.Entry<String, Session>> entries = USERS.entrySet();
            for (Map.Entry<String, Session> entry : entries)
            {
                Session value = entry.getValue();
                if (value.equals(session))
                {
                    key = entry.getKey();
                    break;
                }
            }
        }
        else
        {
            return true;
        }
        return remove(key);
    }

    /**
     * 移出用户
     *
     * @param key 键
     */
    public static boolean remove(String key)
    {
        LOGGER.info("\n 正在移出用户 - {}", key);
        Session remove = USERS.remove(key);
        if (remove != null)
        {
            boolean containsValue = USERS.containsValue(remove);
            LOGGER.info("\n 移出结果 - {}", containsValue ? "失败" : "成功");
            return containsValue;
        }
        else
        {
            return true;
        }
    }

    /**
     * 获取在线用户列表
     *
     * @return 返回用户集合
     */
    public static Map<String, Session> getUsers()
    {
        return USERS;
    }

    /**
     * 群发消息文本消息
     *
     * @param message 消息内容
     */
    public static void sendMessageToUsersByText(String message)
    {
        Collection<Session> values = USERS.values();
        for (Session value : values)
        {
            sendMessageToUserByText(value, message);
        }
    }

    /**
     * 发送文本消息
     *
     * @param session 缓存
     * @param message 消息内容
     */
    public static void sendMessageToUserByText(Session session, String message)
    {
        if (session != null)
        {
            try
            {
                session.getBasicRemote().sendText(message);
            }
            catch (IOException e)
            {
                LOGGER.error("\n[发送消息异常]", e);
            }
        }
        else
        {
            LOGGER.info("\n[你已离线]");
        }
    }
}

2.5 html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>测试界面</title>
</head>

<body>

<div>
    <input type="text" style="width: 20%" value="ws://127.0.0.1/websocket/message" id="url">
	<button id="btn_join">连接</button>
	<button id="btn_exit">断开</button>
</div>
<br/>
<textarea id="message" cols="100" rows="9"></textarea> <button id="btn_send">发送消息</button>
<br/>
<br/>
<textarea id="text_content" readonly="readonly" cols="100" rows="9"></textarea>返回内容
<br/>
<br/>
<script th:src="@{/js/jquery.min.js}" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        var ws = null;
        // 连接
        $('#btn_join').click(function() {
        	var url = $("#url").val();
            ws = new WebSocket(url);
            ws.onopen = function(event) {
                $('#text_content').append('已经打开连接!' + '\n');
            }
            ws.onmessage = function(event) {
                $('#text_content').append(event.data + '\n');
            }
            ws.onclose = function(event) {
                $('#text_content').append('已经关闭连接!' + '\n');
            }
        });
        // 发送消息
        $('#btn_send').click(function() {
            var message = $('#message').val();
            if (ws) {
                ws.send(message);
            } else {
                alert("未连接到服务器");
            }
        });
        //断开
        $('#btn_exit').click(function() {
            if (ws) {
                ws.close();
                ws = null;
            }
        });
    })
</script>
</body>
</html>

在这里插入图片描述

2.6 vue版本前端代码

url: "ws://localhost:8080/websocket
我们本地配置为:ws://127.0.0.1/websocket/message
ws/wss 不可修改,ip为本地需要连接地址ip websocket/message 为默认调用ruoyiWebSocketServer 接口;

//data中定义变量
lockReconnect: false,
      wsCfg: {
        // websocket地址(需要更改连接地址)
        url: "ws://localhost:8080/websocket
},
//method中定义方法

 createWebSocket() {
      console.log('createWebSocket')
            try {
                // 创建Web Socket 连接
                socket = new WebSocket(this.wsCfg.url);
                // 初始化事件
                this.initEventHandle(socket);
            } catch (e) {
                // 出错时重新连接
                console.log(e)
                this.reconnect(this.wsCfg.url);
            }
        },
    initEventHandle(socket) {
            // 连接关闭时触发
            socket.onclose = () => {
                console.log("连接关闭");
            };
            // 通信发生错误时触发
            socket.onerror = () => {
                // 重新创建长连接
                this.reconnect();
            };
            // 连接建立时触发
            socket.onopen = () => {
                console.log("连接成功");
            };
            // 客户端接收服务端数据时触发
            socket.onmessage = msg => {
                // 业务逻辑处理
              try{
                this.websocketSetFlag =	JSON.parse(msg.data).content;
                console.log(this.websocketSetFlag )
              }catch{

              }
						  
            };
        },
    reconnect() {
            //重连
            if (this.lockReconnect) {
                return;
            }
            this.lockReconnect = true;
            // 没连接上会一直重连,设置延迟避免请求过多
            setTimeout(() => {
                this.lockReconnect = false;
                this.createWebSocket(this.wsCfg.url);
            }, 2000);
        },
    sendWebsocket(text){
        //发送数据
        socket.send(
        JSON.stringify({
            type: "control",
            content: text,
        })
      ) ;
    },

2.7 controller

@Controller
@RequestMapping("/user")
public class HelloController {

    // websocket测试
    @GetMapping("/ws")
    public String ws()
    {
        return "websocket";
    }
}

在这里插入图片描述
嵌入微服务项目我是直接把他直接放在固定模块中的;

在这里插入图片描述
此文章暂时只适用于新手;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/597234.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

加油站“变身”快充站,探讨充电新模式

摘要&#xff1a;新能源汽车规模化发展的同时&#xff0c;充电不便利的痛点愈发明显。在未来的新能源汽车行业发展当中&#xff0c;充电的矛盾要远远大于造车的矛盾&#xff0c;解决好充电的问题成为电动汽车行业发展的一个突出问题。解决充电补能问题&#xff0c;重要的方式之…

自动化测试还是手动测试?深度探讨Web自动化测试的利与弊,精准性和可靠性抉择应如何。

目录 前言&#xff1a; 1. 自动化测试的价值 2. 自动化测试的瓶颈 总结 前言&#xff1a; 随着互联网的飞速发展&#xff0c;Web应用越来越成为我们日常工作和生活中必不可少的一部分。这也就意味着&#xff0c;Web应用的质量和稳定性变得至关重要。而Web自动化测试作为保…

87.建立主体页面-第三部分

上节我们完成的页面如下&#xff1a; ● 我们预计在按钮下面放置一些用户案例 去年我们送了25万多份餐品! ![在这里插入图片描述](https://img-blog.csdnimg.cn/c71d57199b834a8c9763a345939adc5d.png) ● 我们将这些图片文字以flex布局方式排列摆放 .delivered-meals {dis…

ebpf代码编写小技巧

查看所有tracepoint perf list perf追踪tracepoint perf trace --no-syscalls --event net:*查看tracepoint的具体参数 sudo python3 /usr/share/bcc/tools/tplist -v net:napi_gro_receive_entry cat /sys/kernel/debug/tracing/events/net/netif_rx/format内核vmlinux.h生…

Zinx框架学习 - 链接封装与业务绑定

Zinx - V0.2 链接封装与业务绑定 之前的v0.1版本&#xff0c;已经实现了一个基础的Server框架&#xff0c;现在需要对客户端链接和不同的客户端链接锁处理的不同业务再做一层接口封装在ziface下创建一个属于链接的接口文件iconnection.go&#xff0c;znet下创建文件connection…

异步利刃CompletableFuture

什么是CompletableFuture? CompletableFuture 类实现了 Future 和 CompletionStage 接口并且新增了许多方法&#xff0c;它支持 lambda&#xff0c;通过回调利用非阻塞方法&#xff0c;提升了异步编程模型。简单来说可以帮我们实现任务编排。【文中所有代码已上传码云】 Com…

程序员必修必炼的设计模式之工厂模式

本文首发自「慕课网」&#xff08;www.imooc.com&#xff09;&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"或慕课网公众号&#xff01; 作者&#xff1a;李一鸣 | 慕课网讲师 工厂模式是平时开发过程中最常见的设计模式…

15.3:最多做K个项目,初始资金是W,返回最大资金

输入正数数组costs、正数数组profits、正数K和正数M costs[i]表示i号项目的花费 profits[i]表示i号项目在扣除花费之后还能挣到的钱(利润) K表示你只能串行的最多做k个项目 M表示你初始的资金 说明&#xff1a;每做完一个项目&#xff0c;马上获得的收益&#xff0c;可以支持你…

FP独立站支付渠道市场逐渐向好!信用卡和AB轮询哪个好?

之前一篇文章写过品牌方使用ChatGPT技术检测FP网站&#xff0c;对FP独立站的收款起到了很大的影响。今天是6月的第一天&#xff0c;我为各位带来了一个好消息&#xff01;那就是在过去的3-5月份&#xff0c;信用卡收款实行整顿&#xff0c;目前支付渠道都有所松动。例如&#x…

好孩子福利|Sup游戏机,一秒回到童年

这份六一礼物对儿童来说有点幼稚&#xff0c;但对程序员刚刚好&#xff5e; ​ Sup 游戏机&#xff0c;一秒回到童年&#xff01; 到底有多好玩呢&#xff1f;可以参考 B 站试玩视频&#xff01; 太火鸟好物推荐——掌上游戏机sup 参加流程&#xff1a; STEP 1&#xff1a;扫…

以太网——MDIO(SMI)接口的FPGA实现

在 MAC 与 PHY 之间&#xff0c;有一个配置接口&#xff0c;即 MDIO&#xff08;也称 SMI&#xff0c;Serial Management Interface&#xff09;&#xff0c;可以配置 PHY 的工作模式、获取 PHY 芯片的工作状态等。本文以 PHY 芯片 B50610 为例&#xff0c;实现 MDIO 接口&…

NUC972 Linux学习 NAND FLASH 制作系统

设备&#xff1a;NUC972DF61YC 使用的虚拟机环境&#xff1a;官方提供的NUC972DF61YC - Nuvoton 板载NAND FLASH&#xff0c;前期主要学习怎么uboot、ubootspl、uimage、env烧录。官方配置没有使用rootfs在flash中&#xff0c;所以数据会掉电丢失。即文件系统在RAM中。 这里仅…

基于Jackson实现API接口数据脱敏

一、背景 用户的一些敏感数据&#xff0c;例如手机号、邮箱、身份证等信息&#xff0c;在数据库以明文存储&#xff08;加密存储见《基于Mybatis-Plus拦截器实现MySQL数据加解密》&#xff09;&#xff0c; 但在接口返回数据给浏览器&#xff08;或三方客户端&#xff09;时&a…

设计一个支持并发的前端接口缓存

目录​​​​​​​ 缓存池 并发缓存 问题 思考 优化&#x1f914; 总结 最后 缓存池 缓存池不过就是一个map&#xff0c;存储接口数据的地方&#xff0c;将接口的路径和参数拼到一块作为key&#xff0c;数据作为value存起来罢了&#xff0c;这个咱谁都会。 const cach…

DTU和MQTT网关优缺点

目前市面上有两种设备实现Modbus转MQTT网关。网关式、DTU式。 钡铼技术网关内部进行转换 网关式 优点&#xff1a; 1、通讯模块和MCU分开&#xff0c;通讯模块只做通讯功能&#xff0c;协议转换有单独主控MCU&#xff0c;“硬转换”&#xff1b; 2、数据点是通过映射到主控…

【严重】GitLab 存在代码执行漏洞

漏洞描述 GitLab 是一款基于Git的代码托管、版本控制、协作开发平台。 GitLab CE/EE 15.4 至 15.9.6 版本&#xff0c;15.10 至 15.10.5 版本和 15.11 至 15.11.1 版本存在代码执行漏洞。在某些条件下&#xff0c;实例上的任何GitLab用户都可以使用GraphQL端点将恶意运行程序…

HTML框架-----标签(下)

目录 前言&#xff1a; 5.容器标签 效果&#xff1a;​编辑 6.列表标签 (1)无序 &#xff08;2&#xff09;有序 7.图片标签 8.超链接标签 &#xff08;1&#xff09;链接资源 &#xff08;2&#xff09;超链接锚点 前言&#xff1a; 今天我们接着来继续学习html的标签&am…

五重要性能测试指标揭秘!并发数、TPS、QPS、响应时间和资源利用率,了解性能瓶颈,优化系统高负载下的处理能力

目录 前言&#xff1a; 1. 并发数 2. TPS 3. QPS 4. 响应时间 5. 资源利用率 总结 前言&#xff1a; 在高并发的场景下&#xff0c;我们需要考虑如何优化我们的应用程序&#xff0c;以确保它可以承受大量的请求并且在给定时间内响应。对于这个问题&#xff0c;性能测试就…

字节码文件结构

目录 1、概述 2、JVM的两个无关性 3、Class字节码文件的结构 1、基本存储单位 2、字节码文件数据结构 3、Class文件格式 4、魔数与Class文件的版本 5、常量池 6、访问标志 7、类索引、父类索引与接口索引集合 8、字段表集合 9、方法表集合 10、属性表集合 11、总…

centos7.9升级rockylinux8.8

前言 查看centos的版本 &#xff0c;我这台服务器是虚拟机,下面都是模拟实验 升级前一定要把服务器上配置文件&#xff0c;数据等进行备份 [rootlocalhost ~]#cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [rootlocalhost ~]#uname -a Linux jenkins_ser…