springboot整合webSocket（看完即入门）

news2025/7/11 1:36:24

webSocket

  • 1、什么是webSocket？
  • 2、webSocket可以用来做什么?
  • 3、webSocket协议
  • 4、服务端
    • WebSocket操作类
  • 5、客户端

1、什么是webSocket？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在这里插入图片描述

2、webSocket可以用来做什么?

利用双向数据传输的特点可以用来完成很多功能，不需要前端轮询，浪费资源。例如：

1、通告功能
2、聊天功能 （如下是逻辑图）
在这里插入图片描述

3、实时更新数据功能
4、弹幕
等等。。。。。。

3、webSocket协议

本协议有两部分：握手和数据传输。
握手是基于http协议的。

来自客户端的握手看起来像如下形式：

GET ws://localhost/chat HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Protocol: chat,superchat
Sec-WebSocket-Version: 13

来自服务器的握手看起来像如下形式：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept:s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

在这里插入图片描述

4、服务端

maven依赖

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

WebSocket配置类

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

@Configuration
public class WebSocketConfig {
    /**
     * 	注入ServerEndpointExporter，
     * 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    
}

WebSocket操作类

通过该类WebSocket可以进行群推送以及单点推送


import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.springframework.stereotype.Component;

import lombok.extern.slf4j.Slf4j;

@Component
@Slf4j
@ServerEndpoint("/websocket/{userId}")  // 接口路径 ws://localhost:8087/webSocket/userId;

public class WebSocket {
    
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
        /**
     * 用户ID
     */
    private String userId;
    
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    //虽然@Component默认是单例模式的，但springboot还是会为每个websocket连接初始化一个bean，所以可以用一个静态set保存起来。
    //  注：底下WebSocket是当前类名
    private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();
    // 用来存在线连接用户信息
    private static ConcurrentHashMap<String,Session> sessionPool = new ConcurrentHashMap<String,Session>();
    
    /**
     * 链接成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value="userId")String userId) {
        try {
			this.session = session;
			this.userId = userId;
			webSockets.add(this);
			sessionPool.put(userId, session);
			log.info("【websocket消息】有新的连接，总数为:"+webSockets.size());
		} catch (Exception e) {
		}
    }
    
    /**
     * 链接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        try {
			webSockets.remove(this);
			sessionPool.remove(this.userId);
			log.info("【websocket消息】连接断开，总数为:"+webSockets.size());
		} catch (Exception e) {
		}
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(String message) {
    	log.info("【websocket消息】收到客户端消息:"+message);
    }
    
	  /** 发送错误时的处理
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {

        log.error("用户错误,原因:"+error.getMessage());
        error.printStackTrace();
    }

    
    // 此为广播消息
    public void sendAllMessage(String message) {
    	log.info("【websocket消息】广播消息:"+message);
        for(WebSocket webSocket : webSockets) {
            try {
            	if(webSocket.session.isOpen()) {
            		webSocket.session.getAsyncRemote().sendText(message);
            	}
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    
    // 此为单点消息
    public void sendOneMessage(String userId, String message) {
        Session session = sessionPool.get(userId);
        if (session != null&&session.isOpen()) {
            try {
            	log.info("【websocket消息】 单点消息:"+message);
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    
    // 此为单点消息(多人)
    public void sendMoreMessage(String[] userIds, String message) {
    	for(String userId:userIds) {
    		Session session = sessionPool.get(userId);
            if (session != null&&session.isOpen()) {
                try {
                	log.info("【websocket消息】 单点消息:"+message);
                    session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
    	}
        
    }
    
}

方法调用示例

注入我们的操作类

@Resource
private WebSocket webSocket;

发送消息给前端

//创建业务消息信息
JSONObject obj = new JSONObject();
obj.put("cmd", "topic");//业务类型
obj.put("msgId", sysAnnouncement.getId());//消息id
obj.put("msgTxt", sysAnnouncement.getTitile());//消息内容
//全体发送
webSocket.sendAllMessage(obj.toJSONString());		
//单个用户发送 (userId为用户id)
webSocket.sendOneMessage(userId, obj.toJSONString());		
//多个用户发送 (userIds为多个用户id，逗号‘,’分隔)
webSocket.sendMoreMessage(userIds, obj.toJSONString());

5、客户端

前端中VUE使用WebSocket

<script>
    import store from '@/store/'

    export default {
        data() {
            return {
            }
        },
        mounted() { 
              //初始化websocket
              this.initWebSocket()
        },
        destroyed: function () { // 离开页面生命周期函数
              this.websocketclose();
        },
        methods: {
            initWebSocket: function () { // 建立连接
                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
                var userId = store.getters.userInfo.id;
                var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
                this.websock = new WebSocket(url);
                this.websock.onopen = this.websocketonopen;
                this.websock.send = this.websocketsend;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
              },
              // 连接成功后调用
              websocketonopen: function () {
                console.log("WebSocket连接成功");
              },
              // 发生错误时调用
              websocketonerror: function (e) {
                console.log("WebSocket连接发生错误");
              },
              // 给后端发消息时调用
              websocketsend: function (e) {
                console.log("WebSocket连接发生错误");
              },
							// 接收后端消息
              // vue 客户端根据返回的cmd类型处理不同的业务响应
              websocketonmessage: function (e) {
                var data = eval("(" + e.data + ")"); 
                 //处理订阅信息
                if(data.cmd == "topic"){
                   //TODO 系统通知
             
                }else if(data.cmd == "user"){
                   //TODO 用户消息
        
                }
              },
              // 关闭连接时调用
              websocketclose: function (e) {
                console.log("connection closed (" + e.code + ")");
              }
        }
    }
</script>

在这里插入图片描述

接口调用顺序，进来页面 ： 先建立连接–》调用websocketonopen方法，链接成功调用的方法
websocketonmessage方法为接收后端时处理。
当我们要发送消息给后端时调用websocketsend。
当我们要关闭连接时调用websocketclose。
当发现错误时调用websocketonerror。

浏览器查看日志：
朝上的绿色箭头是发出去的消息
朝下的红色箭头是收到的消息
在这里插入图片描述

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

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

相关文章

100天精通Python（可视化篇）——第77天：数据可视化入门基础大全（万字总结+含常用图表动图展示）

100天精通Python（可视化篇）——第77天：数据可视化入门基础大全（万字总结+含常用图表动图展示）

文章目录1. 什么是数据可视化&#xff1f;2. 为什么会用数据可视化&#xff1f;3. 数据可视化的好处&#xff1f;4. 如何使用数据可视化&#xff1f;5. Python数据可视化常用工具1&#xff09;Matplotlib绘图2&#xff09;Seaborn绘图3&#xff09;Bokeh绘图6. 常用图表介绍及其…
阅读更多...
【Windows】六种正确清理C盘的方法，解决你的红色烦恼

【Windows】六种正确清理C盘的方法，解决你的红色烦恼

如何正确的清理C盘前言清理方法1. 利用Windows自己附带的磁盘清理工具2. 开启自动清理3. 通过“配置存储感知或立即运行”来清理4. 管理C盘中的程序5. 系统文件夹转移6. 将C盘现有内容转移到别的盘参考链接前言 Windows操作系统一般是安装在磁盘驱动器的C盘中&#xff0c;运行…
阅读更多...
D435i相机的标定及VINS-Fusion config文件修改

D435i相机的标定及VINS-Fusion config文件修改

引言 当我们想使用D435i相机去跑VINS-Fusion时&#xff0c;如果不把标定过的相机信息写入config文件中就运行&#xff0c;这样运动轨迹会抖动十分严重&#xff0c;里程计很容易漂。接下来将介绍如何标定D435i相机&#xff0c;并设置VINS-Fusion的config文件。 一 标定前的准备…
阅读更多...
k8s中job与cronjob使用详解

k8s中job与cronjob使用详解

一、前言 job，顾名思义就是任务，job的概念在很多框架中都有，而且实际业务场景中也使用非常广泛，比如大家熟悉的hadoop，客户端可以向集群提交一个job，然后集群根据一定的调度策略来处理这个job； k8s中的job，主要用于批量处理的业务场景，比如像那种短暂的一次性任务(每个…
阅读更多...
java 代码样式为什么需要事务，讲述Spring5事务几种方式 认识API

java 代码样式为什么需要事务，讲述Spring5事务几种方式 认识API

首先 在上一文java Spring5 搭建操作数据库事务环境中 我们搭建了一个事务的业务场景 然后 打开项目 我们继续 先看到数据库表 看好两个人的余额 然后 来到senvice层下的transfAccoSenvice 将里面的 transferAccounts方法 更改如下 //转账方法 public void transferAccounts…
阅读更多...
Vue的路由配置（Vue2和Vue3的路由配置）

Vue的路由配置（Vue2和Vue3的路由配置）

系列文章目录 Tips&#xff1a;使用Vue3开发项目已经有一段时间了&#xff0c;关于Vue2的路由是如何一步一步搭建的都快要忘记了&#xff0c;今天写着篇文章主要就是回顾一下&#xff0c;在Vue2和Vue3中我们是如何一步一步的配置路由的。 提示&#xff1a;最好的进步就是有闲暇…
阅读更多...
如何知道你的推荐流每条数据是通过哪种策略召回？

如何知道你的推荐流每条数据是通过哪种策略召回？

大家好&#xff0c;我是空空star&#xff0c;本篇带你了解下C站PC首页推荐流召回策略。 文章目录前言一、utm_medium二、召回策略1.user_follow_bbs&#xff1a;用户关注社区的红包帖子召回2.user_follow&#xff1a;用户关注召回3.top_blink&#xff1a;热门blink召回4.hot&am…
阅读更多...
滚动条样式修改

滚动条样式修改

前言 浏览器中的滚动条样式大家一定都不陌生&#xff0c;其样式并不好康。可能很多小伙伴还不知道&#xff0c;这个东东的样式也可以修改&#xff08;仅支持部分现代浏览器&#xff09;&#xff0c;本次就来带大家用 CSS 修改一下它的样式。 一、认识滚动条 首先我们先来简单…
阅读更多...
（一）卷积神经网络模型之——LeNet

（一）卷积神经网络模型之——LeNet

目录LeNet模型参数介绍该网络特点关于C3与S2之间的连接关于最后的输出层子采样参考LeNet LeNet是一个用来识别手写数字的最经典的卷积神经网络&#xff0c;是Yann LeCun在1998年设计并提出的。Lenet的网络结构规模较小&#xff0c;但包含了卷积层、池化层、全连接层&#xff0…
阅读更多...
【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型

【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 前两篇文章讲解了TypeScript的一些高级类型 详细内容请阅读如下&#xff1a;&#x1f53d; 【前端进阶】-TypeScript高级类型 | 交叉类型、索引签名类型、映射类…
阅读更多...
直接在前端调用 GPT-3 API

直接在前端调用 GPT-3 API

〇、效果展示 一、代码&#xff1a;ask.html app.js ask.html&#xff08;内嵌css&#xff09; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>ChatGPT Web Example</title><style>/* 你的 CSS 代码 */bod…
阅读更多...
CSS 轻松实现‘毛玻璃’效果

CSS 轻松实现‘毛玻璃’效果

毛玻璃1. backdrop-filt 属性2. filter 属性3. backdrop-filter && filter4. 参考资料1. backdrop-filt 属性 通过为元素添加backdrop-filter:blur(模糊值) 这个 CSS 属性&#xff0c;元素所在的区域后方包括后方的其他元素会模糊或颜色有所偏移&#xff0c;元素本身包…
阅读更多...
深拷贝的五种实现方式

深拷贝的五种实现方式

一、什么是深拷贝和浅拷贝 浅拷贝是创建一个新对象&#xff0c;这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型&#xff0c;拷贝的就是基本类型的值&#xff0c;如果属性是引用类型&#xff0c;拷贝的就是指向内存的地址 &#xff0c;所以如果其中一个对象改变…
阅读更多...
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

为了解决npm命令无法正常运行的问题 接上个博客 安装完新版node后使用npm命令会出现以下错误 大致意思就是识别不了npm命令是干啥的 解决方案: 1.首先确定是不是软件没有获得管理员权限运行,右键程序选择管理员权限运行 2.如果管理员权限运行后依然出现错误,检查node的配置…
阅读更多...
React 框架

React 框架

文章目录一、React 框架简介二、配置环境三、组件&#xff08;Component&#xff09;四、Component 组件的组合与交互一、React 框架简介 介绍 CS 与 BS结合&#xff1a;像 React&#xff0c;Vue 此类框架&#xff0c;转移了部分服务器的功能到客户端。将CS 和 BS 加以结合。客…
阅读更多...
java简历项目经验案例(java简历项目经验怎么写)

java简历项目经验案例(java简历项目经验怎么写)

如何描述项目经验-seo简历项目经验怎么&#xff1f;seo简历项目经验怎么写 写自己从事过的什么项目。写具体什么模块。如果没有就写自己能达到什么水平&#xff0c;能做出什么模块。 什么叫项目经验&#xff1f;什么叫项目经验?简历中的项目经验可以写些什么? 项目经验与工作…
阅读更多...
flex布局之flex-direction

flex布局之flex-direction

一、flex布局的原理 1,flex是”flexible Box”的缩写&#xff0c;意为”弹性布局”&#xff1b; 2.当我们为父盒子设为flex布局以后&#xff0c;子元素的float、clear和vertical-align属性将会失效。 言而简之&#xff1a;flex布局原理就是通过给父盒子添加flex属性&#xff0…
阅读更多...
VUE项目部署

VUE项目部署

前端项目的部署 1.1 开发完的vue的项目 首先运行 以下命令 对项目进行打包 npm run build1.2 安装nginx服务器 ​ nginx是一款轻量级的Web服务器、反向代理服务器&#xff0c;由于它的内存占用少&#xff0c;启动极快&#xff0c;高并发能力强&#xff0c;在互联网项目中广泛…
阅读更多...
若依RuoYi-Vue前后端项目启动流程

若依RuoYi-Vue前后端项目启动流程

1.git找到RuoYi-Vue RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本 2.本地创建文件夹&#xff0c;cmd进入该文件夹下并进行克隆项目 git cl…
阅读更多...
webpack安装与使用（详细）

webpack安装与使用（详细）

一.什么是webpack? webpack是现代javascript应用程序的静态模块打包器&#xff0c;当 webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图(dependency graph)&#xff0c;其中包含应用程序需要的每个模块&#xff0c;然后将所有这些模块打包成一个或多个 bundl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023