WebSocket实现后台向前端推送信息
mhr18 2024-12-10 14:14 43 浏览 0 评论
什么是WebSocket?
因为 HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端
快速上手
<!-- websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
WebSocketConfig启用WebSocket的支持
/**
* 开启WebSocket支持
* @author zhucan
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
WebSocketServer
因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller
直接@ServerEndpoint("/imserver/{userId}") 、@Component启用即可，然后在里面实现@OnOpen开启连接，@onClose关闭连接，@onMessage接收消息等方法。
新建一个ConcurrentHashMap webSocketMap 用于接收当前userId的WebSocket，方便IM之间对userId进行推送消息。单机版实现到这里就可以。
集群版（多个ws节点）还需要借助mysql或者redis等进行处理，改造对应的sendMessage方法即可。
/**
* @author
*/
@ServerEndpoint("/imserver/{userId}")
@Component
public class WebSocketService {
/**
* concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
*/
private static ConcurrentHashMap<String, WebSocketService> webSocketMap = new ConcurrentHashMap<>();
/**
* 与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
private Session session;
/**
* 接收userId
*/
private String userId = "";
/**
* 连接建立成功调用的方法
* <p>
* 1.用map存 每个客户端对应的MyWebSocket对象
*/
@OnOpen
public void onOpen(Session session, @PathParam("userId") String userId) {
this.session = session;
this.userId = userId;
if (webSocketMap.containsKey(userId)) {
webSocketMap.remove(userId);
webSocketMap.put(userId, this);
//加入set中
} else {
webSocketMap.put(userId, this);
//加入set中
}
//服务端向客户端发送信息
sendMessage("用户" + userId + "上线了,当前在线人数为:" + webSocketMap.size() + "。");
}
/**
* 报错
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
error.printStackTrace();
}
/**
* 实现服务器推送到对应的客户端
*/
public void sendMessage(String message) {
try {
this.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 自定义 指定的userId服务端向客户端发送消息
*/
public static void sendInfo(String message, String userId, String toUserId) {
//log.info("发送消息到:"+userId+"，报文:"+message);
if (StringUtils.isNotBlank(toUserId) && webSocketMap.containsKey(toUserId)) {
webSocketMap.get(toUserId).sendMessage(message);
} else {
webSocketMap.get(userId).sendMessage(toUserId + "已经下线。");
}
}
/**
* 自定义关闭
*
* @param userId
*/
public static void close(String userId) {
if (webSocketMap.containsKey(userId)) {
webSocketMap.remove(userId);
}
}
/**
* 获取在线用户信息
*
* @return
*/
public static Map getOnlineUser() {
return webSocketMap;
}
}
controller 对外提供发送 关闭websocket方法
@RestController
public class DemoController {
@PostMapping("/push")
public ResponseEntity<String> pushToWeb(String message, String toUserId,String userId) throws IOException {
WebSocketService.sendInfo(message,userId,toUserId);
return ResponseEntity.ok("MSG SEND SUCCESS");
}
@GetMapping("/close")
public String close(String userId){
WebSocketService.close(userId);
return "ok";
}
@GetMapping("/getOnlineUser")
public Map getOnlineUser(){
return WebSocketService.getOnlineUser();
}
}
html 前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>websocket通讯</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var socket;
function openSocket(flag) {
var socketUrl = "http://localhost:8449/imserver/" + $("#userId").val();
socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
if (socket != null) {
socket.close();
socket = null;
}
socket = new WebSocket(socketUrl);
//打开事件
socket.onopen = function () {
//获得消息事件
socket.onmessage = function (msg) {
$('#contain').html(msg.data);
};
//发生了错误事件
socket.onerror = function () {
alert("websocket发生了错误");
}
$("#userId").attr("disabled", true);
}
}
function sendMessage() {
$.ajax({
url:"http://localhost:8449/push",
type:"POST",
data:{
'message':$("#contentText").val(),
'toUserId':$("#toUserId").val(),
'userId':$("#userId").val()
}
})
}
function closeSocket() {
var userId =$("#userId").val()
$.ajax({
type:"get",
url:"http://localhost:8449/close?userId="+userId,
success:function(res) {
alert('111');
}
});
$("#userId").attr("disabled", false);
$('#contain').html("下线成功！");
}
</script>
<body>
<p>【内容】：<span id="contain"></span></p>
<p>【当前用户】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【发送用户】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【发送的内容】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【操作】：<div><button onclick="openSocket()">登录socket</button></div>
<p>【操作】：<div><button onclick="closeSocket()">关闭socket</button></div>
<p>【操作】：<div><button onclick="sendMessage()">发送消息</button></div>
</body>
</html>
相关推荐
- Redis教程——数据类型(字符串、列表)
-
上篇文章我们学习了Redis教程——Redis入门，这篇文章我们学习Redis教程——数据类型（字符串、列表）。Redis数据类型有：字符串、列表、哈希表、集合、有序集合、地理空间、基数统计、位图、位...
- 说说Redis的数据类型（redis数据类型详解）
-
一句话总结Redis核心数据类型包括：String：存储文本、数字或二进制数据。List：双向链表，支持队列和栈操作。Hash：字段-值映射，适合存储对象。Set：无序唯一集合，支持交并差运算。Sor...
- Redis主从复制（Redis主从复制复制文件）
-
介绍Redis有两种不同的持久化方式，Redis服务器通过持久化，把Redis内存中持久化到硬盘当中，当Redis宕机时，我们重启Redis服务器时，可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域，Redis作为一款高性能的内存数据库，被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制，更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis + MQ:高并发秒杀的技术方案与实现
-
大家好，我是一安~前言在电商秒杀场景中，瞬间爆发的海量请求往往成为系统的生死考验。当并发量达到数万甚至数十万QPS时，传统数据库单表架构难以支撑，而Redis与消息队...
- Redis面试题2025（redis面试题及答案2024）
-
Redis基础什么是Redis？它的主要特点是什么？Redis和Memcached有什么区别？Redis支持哪些数据类型？Redis的字符串类型最大能存储多少数据？Redis的列表类型和集合类型有什么...
- Redis学习笔记:过期键管理与EXPIRE命令详解(第七章)
-
在Redis中，过期键（ExpireKey）机制是实现缓存自动失效、临时数据管理的核心功能。EXPIRE命令作为设置键过期时间的基础工具，其工作原理与使用细节直接影响系统的内存效率和数据一致性。本章...
- Redis传送术:几分钟内将生产数据迁移到本地
-
在生产环境中使用Redis就像一把双刃剑。它快速、强大，存储了大量实时数据——但当你想要在本地调试问题或使用真实数据进行测试时，事情就变得棘手了。我们要做什么？我们想要从生产环境Redis实例中导出键...
- 使用redis bitmap计算日活跃用户数
-
Metrics(指标)在允许延迟的情况下，通常通过job任务定时执行（如按小时、每天等频率），而基于Redis的Bitmap使我们能够实时完成此类计算，且极其节省空间。以亿级用户计算“日活跃用户...
- 大部分.NET开发者都不知道的Redis性能优化神技!
-
你还在为Redis存储空间不够而发愁吗？还在为Json数据太大导致网络传输缓慢而头疼吗？今天我要告诉你一个让Redis性能飙升300%的秘密武器！这个技巧简单到让你怀疑人生，但效果却强大到让你的老板对...
- Redis学习笔记:内存优化实战指南(第六章)
-
Redis作为内存数据库，内存使用效率直接影响系统性能与成本。对于处理大规模数据的场景，合理的内存优化能显著降低资源消耗，提升服务稳定性。本章将基于Redis的内存管理特性，详解实用的优化技巧与最佳实...
- 大数据-47 Redis 内存控制、Key 过期与数据...
-
点一下关注吧！！！非常感谢！！持续更新！！！AI篇持续更新中！（长期更新）AI炼丹日志-30-新发布【1T万亿】参数量大模型！Kimi-K2开源大模型解读与实践，持续打造实用AI工具指南！...
- Redis学习笔记:内存优化进阶与实战技巧(第六章·续)
-
上一节我们介绍了Redis内存优化的基础策略，本节将深入更多实战技巧，包括数据结构的精细化选择、过期键的内存回收机制，以及大规模场景下的内存管理方案，帮助你在高并发场景下进一步提升内存利用率。七、数据...
- 低配服务器(2核3G)宝塔面板的Redis优化指南:512MB内存高效运行
-
在2核3G内存的低配服务器上部署Redis服务时，资源分配不当极易导致服务器崩溃。本文针对宝塔面板环境（PHP8.2+MariaDB10.6+Nginx），提供经过实战验证的Redis优化...
- Redis:为什么您应该多缓存少查询（为什么使用redis做缓存而不是其他的消息队列入kafka）
-
还在一次又一次地调用相同的API吗？这不仅效率低下——而且成本高昂。性能缓慢、成本更高，用户体验更差。让我们停止这种做法——从这篇文章开始。:D首先您需要了解Redis，简单来说，它是一个超快速的内存...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle位图索引 (74)
- oracle批量插入数据 (65)
- oracle事务隔离级别 (59)
- oracle 空为0 (51)
- oracle主从同步 (56)
- oracle 乐观锁 (53)
- redis 命令 (83)
- php redis (97)
- redis 存储 (67)
- redis 锁 (74)
- 启动 redis (73)
- redis 时间 (60)
- redis 删除 (69)
- redis内存 (64)
- redis并发 (53)
- redis 主从 (71)
- redis 订阅 (51)
- redis 登录 (54)
- redis 面试 (58)
- 阿里 redis (59)
- redis 搭建 (53)
- redis的缓存 (55)
- lua redis (58)
- redis 连接池 (61)
- redis 限流 (51)