WebScoket-服务器客户端双向通信

ops/2025/1/17 13:33:04/

1. 消息推送常用方式介绍

轮询

浏览器以指定的时间间隔向服务器发出HTTP请求,服务器实时返回数据给浏览器。

image-20250109103523290

长轮询

浏览器发出ajax请求,服务器端接收到请求后,会阻塞请求直到有数据或者超时才返回。

image-20250109103936370

SSE

server-sent-event:服务器发送事件

SSE是在服务器和客户端之间打开一个单向通道,服务器通向客户端。

服务器响应的不再是一次性的数据包,而是text/event-stream类型的数据流信息。

服务器有数据变更时,将数据流式传输到客户端。

image-20250109104625870


2. WebSocket

2.1 介绍

WebSocket是一种在基于TCP连接上进行全双工通信的协议。

说明:

  • 全双工:允许数据在两个方向上同时传输。
  • 半双工:允许数据在两个方向上传输,但是同一个时间段内只允许一个方向上传输。

image-20250109105530021

2.2 客户端API

websocket对象创建

let ws = new WebSocket(URL);

URL说明

  • 格式:协议://ip地址:端口/访问路径
  • 协议:协议名称为ws

websocket对象相关事件

事件事件处理程序描述
openws.onopen连接建立时
messagews.onmessage客户端接受到服务器发送到数据时触发
closews.onclose连接关闭时触发
errorws.onerror发生错误时触发

websocket对象提供的方法

send():通过websocket对象调用该方法发送数据给服务端。

<script>let ws = new WebSocket("ws://localhost:8080/chat")ws.onopen = function (){}ws.onmessage = function (evt) {console.log(evt)}ws.onclose = function () {}ws.onerror = function (){}
</script>

2.3 服务端API

Tomcat的7.0.5版本开始支持websocket,并且实现了Java websocket规范。

Java websocket应用由一系列的Endpoint组成。Endpoint是一个java对象,代表WebSocket链接的一端,对于服务端,我们可以视为处理具体websocket消息的接口。

我们可以通过两种方式定义Endpoint:

  • 第一种是编程式,即继承类javax.websocket.Endpoint并实现其方法。
  • 第二种是注解式,即定义一个POJO,并添加@ServerEndpoint相关注解。

Endpoint实例在WebSocket握手时创建,并在客户端与服务端链接过程中有效,最后在链接关闭时结束。在Endpoint接口中明确定义了与其生命周期相关的方法,规范实现者确保生命周期的各个阶段调用实例的相关方法。生命周期方法如下:

方法描述注解
onOpen()当开启一个新的会话时调用,该方法是客户端与服务器端握手成功后调用的方法@OnOpen
onClose()当会话关闭时调用@OnClose
onError()当连接过程异常时调用@OnError

服务器端接受客户端数据

  • 编程式

    通过添加MessageHandler消息处理器来接收消息

  • 注解式

    在定义Endpoint时,通过@OnMessage注解指定接收消息的方法

服务器端推送数据到客户端

发送消息则由RemoteEndpoint完成,其实例由Session维护。

发送消息有2种方式

  • 通过session.getBasicRemote获取同步消息发送的实例,然后调用其sendXXX()方法发送消息。
  • 通过session.getAsyncRemote获取异步消息发送实例,然后调用其sendXXX()方法发送消息。
@ServerEndpoint("/chat")
@Component
public class ChatEndpoint {@OnOpenpublic void onOPen(Session session,EndPointConfig config){}@OnMessagepublic void onMessage(String message){}@OnClosepublic void onClose(Session session){}
}

3. 总结

新建SpringBoot项目,导入依赖:

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

编写配置类,扫描所有添加@ServerEndpoint注解的Bean

@Configuration
public class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

编写配置类,用户获取HttpSession对象

@Configuration
public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {@Overridepublic void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {HttpSession session = (HttpSession) request.getHttpSession();// 将HttpSession对象存储到配置对象中sec.getUserProperties().put(HttpSession.class.getName(), session);}
}

@ServerEndpoint注解中引入配置器

@ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class)

创建ChatEndPoint

@Component
@ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class)
public class ChatEndpoint {private static final Map<String, Session> onlineUsers = new ConcurrentHashMap<>();private HttpSession httpSession;@OnOpenpublic void onOpen(Session session, EndpointConfig config) {this.httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());}public void broadcastAllUser(){}@OnMessagepublic void onMessage(String message, Session session) {}@OnClosepublic void onClose(Session session, CloseReason closeReason) {}
}

服务器向客户端发送消息:

session.getAsyncRemote().sendText("...");

客户端向服务器发送消息:

let ws = new WebSocket("ws://localhost:8080/chat")
ws.send("xxx");

  

关注灵活就业新业态,关注公账号:贤才宝(贤才宝https://www.51xcbw.com)


http://www.ppmy.cn/ops/150816.html

相关文章

高性能现代PHP全栈框架 Spiral

概述 Spiral Framework 诞生于现实世界的软件开发项目是一个现代 PHP 框架&#xff0c;旨在为更快、更清洁、更卓越的软件开发提供动力。 特性 高性能 由于其设计以及复杂精密的应用服务器&#xff0c;Spiral Framework框架在不影响代码质量以及与常用库的兼容性的情况下&a…

冯·诺依曼体系结构:计算机科学的奠基石

文章目录 前言&#x1f3b7;一、冯诺依曼体系结构&#xff08;Von Neumann Architecture&#xff09;&#x1f3b8;1.1 硬件介绍&#x1f941;1. 输入设备&#x1f941;2. 输出设备&#x1f941;3. 输入输出一体化设备&#x1f941;4. 存储器&#x1f941;5. 中央处理器CPU&…

【linux性能优化】系统启动参数

grubby -c /boot/grub2/grub.cfg --update-kernelALL --args“raidnoautodetect swiotlb16384 crashkernel16M,low crashkernel512M,high modprobe.blacklistvirtio_net transparent_hugepagenever acpi_force_table_verification” grubby&#xff1a;该工具用于更新和管理GR…

web前端第六次作业---制作网页页面

制作网页页面 代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…

数据结构学习记录-数据结构概念

1 数据结构&#xff1a; 数据结构是计算机存储&#xff0c;管理数据的方式。 数据必须依据某种逻辑联系组织在一起存储在计算机内 数据结构研究的就是这种数据的存储结构和数据的逻辑结构。 1.1 数据的逻辑结构&#xff1a; 逻辑结构指的是数据本身之间的关系 集合&#x…

zustand 切片模式使用,persist 中间件持久化状态

zustand - npm 安装 npm i zustand 创建切片目录&#xff1a; 创建切片 channelStore.js import { getChannelsAPI } from "/apis/article"; const channelStore (set) > {return {channelList: [],fetchChannelList: async () > {const res await getChanne…

传统数据湖和数据仓库的“中心化瓶颈”

传统数据湖和数据仓库的**“中心化瓶颈”**&#xff0c;主要是由于其架构设计和治理模式的局限性&#xff0c;无法有效应对现代企业中数据规模的快速增长和组织复杂性。以下是具体表现&#xff1a; 1. 单点瓶颈&#xff08;Single Point Bottleneck&#xff09; 传统数据湖/仓…

阀井可燃气体监测仪,开启地下管网安全新篇章-旭华智能

在城市的脉络中&#xff0c;地下管网犹如隐秘的动脉&#xff0c;支撑着现代生活的运转。而在这庞大网络的关键节点上&#xff0c;阀井扮演着不可或缺的角色。然而&#xff0c;由于其密闭性和复杂性&#xff0c;阀井内部一旦发生可燃气体泄漏&#xff0c;将对公共安全构成严重威…