当前位置： 首页 > news >正文

持久双向通信网络协议-WebSocket-入门案例实现demo

news 2026/3/31 10:30:14

1 介绍

WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接， 并进行双向数据传输。

HTTP协议和WebSocket协议对比：

  • HTTP是短连接（一次响应完即消除）

  • WebSocket是长连接（持久连接）

  • HTTP通信是单向的，基于请求响应模式

  • WebSocket支持双向通信

  • HTTP和WebSocket底层都是TCP连接

思考：既然WebSocket支持双向通信，功能看似比HTTP强大，那么我们是不是可以基于WebSocket开发所有的业务功能？

WebSocket缺点：

服务器长期维护长连接需要一定的成本 各个浏览器支持程度不一 WebSocket 是长连接，受网络限制比较大，需要处理好重连

结论：WebSocket并不能完全取代HTTP，它只适合在特定的场景下使用

WebSocket应用场景：(数据实时更新)

1). 视频弹幕

2). 网页聊天

3). 体育实况更新

4). 股票基金报价实时更新

2 入门案例

2.1 案例分析

需求：实现浏览器与服务器全双工通信。浏览器既可以向服务器发送消息，服务器也可主动向浏览器推送消息。

效果展示：

实现步骤：

1). 直接使用websocket.html页面作为WebSocket客户端

2). 导入WebSocket的maven坐标

3). 导入WebSocket服务端组件WebSocketServer，用于和客户端通信

4). 导入配置类WebSocketConfiguration，注册WebSocket的服务端组件

5). 导入定时任务类WebSocketTask，定时向客户端推送数据 (效果演示)

2.2 代码开发

1). 定义websocket.html页面

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>WebSocket Demo</title>
</head>
<body><input id="text" type="text" /><button onclick="send()">发送消息</button><button onclick="closeWebSocket()">关闭连接</button><div id="message"></div>
</body>
<script type="text/javascript">var websocket = null;var clientId = Math.random().toString(36).substr(2);
​//判断当前浏览器是否支持WebSocketif('WebSocket' in window){//连接WebSocket节点websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);}else{alert('Not support websocket')}
​//连接发生错误的回调方法websocket.onerror = function(){setMessageInnerHTML("error");};
​//连接成功建立的回调方法websocket.onopen = function(){setMessageInnerHTML("连接成功");}
​//接收到消息的回调方法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 send(){var message = document.getElementById('text').value;websocket.send(message);}//关闭连接function closeWebSocket() {websocket.close();}
</script>
</html>

2). 导入maven坐标

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

3). 定义WebSocket服务端组件

​

import org.springframework.stereotype.Component;
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 java.util.Collection;
import java.util.HashMap;
import java.util.Map;
​
/*** WebSocket服务*/
@Component
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {
​//存放会话对象private static Map<String, Session> sessionMap = new HashMap();
​/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("sid") String sid) {System.out.println("客户端：" + sid + "建立连接");sessionMap.put(sid, session);}
​/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, @PathParam("sid") String sid) {System.out.println("收到来自客户端：" + sid + "的信息:" + message);}
​/*** 连接关闭调用的方法** @param sid*/@OnClosepublic void onClose(@PathParam("sid") String sid) {System.out.println("连接断开:" + sid);sessionMap.remove(sid);}
​/*** 群发** @param message*/public void sendToAllClient(String message) {Collection<Session> sessions = sessionMap.values();for (Session session : sessions) {try {//服务器向客户端发送消息session.getBasicRemote().sendText(message);} catch (Exception e) {e.printStackTrace();}}}
​
}

4). 定义配置类，注册WebSocket的服务端组件

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
​
/*** WebSocket配置类，用于注册WebSocket的Bean*/
@Configuration
public class WebSocketConfiguration {
​@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
​
}

5). 定义定时任务类，定时向客户端推送数据 (体现测试效果！！！*)

import com.sky.websocket.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
​
@Component
public class WebSocketTask {@Autowiredprivate WebSocketServer webSocketServer;
​/*** 通过WebSocket每隔5秒向客户端发送消息*/@Scheduled(cron = "0/5 * * * * ?")public void sendMessageToClient() {webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));}
}

2.3 功能测试

启动服务，打开websocket.html页面

浏览器向服务器发送数据：

服务器向浏览器间隔5秒推送数据：

相关文章：

持久双向通信网络协议-WebSocket-入门案例实现demo

1 介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP是短连接&#xff0…...

编程日记 2024/1/17 14:13:17

LV.13 D10 Linux内核移植 学习笔记

具体实验步骤在lv13day10 实验十 一、Linux内核概述 1.1 内核与操作系统 内核 内核是一个操作系统的核心&#xff0c;提供了操作系统最基本的功能&#xff0c;是操作系统工作的基础&#xff0c;决定着整个系统的性能和稳定性 操作系统 操作系统是在内核的基础上添…...

编程日记 2024/1/17 14:07:11

STM32面试体验和题目

目录 一、说一下你之前的工作主要干了什么&#xff1f; 二、stm32有关的知识点 1.stm32的外设有哪一些 2.你的毕业论文的项目里面是怎么设计的 三&#xff0c;C语言的考察 1.写一个结构体&#xff08;结构体的内容自由发挥&#xff09; 2.写一个指针型的变量 3.结构体是…...

编程日记 2024/1/17 14:06:10

微软.NET、.NET Framework和.NET Core联系和区别

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;看到不少初学者在学习编程语言的过程中如此的痛苦&#xff0c;我决定做点什么&#xff0c;我小时候喜欢看小人书&#xff08;连环画&#xff09;&#xff0c;在那个没有电视、没有手机的年代&#xff0c;这是…...

编程日记 2024/1/17 14:04:08

Shell脚本同时调用#!/bin/bash和#!/usr/bin/expect

如果你想在一个脚本中同时使用bash和expect&#xff0c;你可以将expect部分嵌入到bash脚本中。以下是一个示例&#xff1a; #!/bin/bash# 设置MySQL服务器地址、端口、用户名和密码 MYSQL_HOST"localhost" MYSQL_PORT"3306" MYSQL_USER"your_usernam…...

编程日记 2024/1/17 14:02:06

C++ Webserver从零开始：基础知识（一）——Linux网络编程基础API

目录 前言 一.socket地址API 1.主机字节序和网络字节序 2.通用socket地址 3.专用socket地址 二.创建socket 三.绑定socket&#xff08;命名socket) 四.监听socket 五.接受连接&#xff08;服务端&#xff09; 六.发起连接&#xff08;客户端&#xff09; 七.关闭连接…...

编程日记 2024/1/17 14:01:05

cookie和session的工作过程和作用：弥补http无状态的不足

cookie是客户端浏览器保存服务端数据的一种机制。当通过浏览器去访问服务端时&#xff0c;服务端可以把状态数据以key-value的形式写入到cookie中&#xff0c;存储到浏览器。浏览器下次去服务服务端时&#xff0c;就可以把这些状态数据携带给服务器端&#xff0c;服务器端可以根…...

编程日记 2024/1/17 13:56:00

【蓝桥杯选拔赛真题30】C++字母转换 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C++字母转换 一、题目要求 1、编程实现 2、输入输出...

编程日记 2024/1/17 13:54:59

资产负债表#通俗易懂

资产负债表&#xff08;the Balance Sheet&#xff09;亦称财务状况表&#xff0c;表示企业在一定日期&#xff08;通常为各会计期末&#xff09;的财务状况&#xff08;即资产、负债和业主权益的状况&#xff09;的主要会计报表。 (99 封私信 / 11 条消息) 能通俗易懂的给小白…...

编程日记 2024/1/17 13:46:50

PCF8563转STM32 RTC避坑指南

问题一&#xff0c;时间读取错误 原因&#xff0c;读写时间必须Time在前&#xff0c;Date在后 HAL_RTC_GetTime(&hrtc, &time, RTC_FORMAT_BCD); HAL_RTC_GetDate(&hrtc, &date, RTC_FORMAT_BCD); HAL_RTC_SetTime(&hrtc, &time, RTC_FORMAT_BCD); …...

编程日记 2024/1/17 13:45:49

前端重置密码报错记录

昨天晚上&#xff0c;我写了重置密码的前端&#xff0c;测试的时候报错 今天上午&#xff0c;我继续试图解决这个问题&#xff0c;我仔细检查了一遍&#xff0c;前端没有问题 可以正常接收输入的数据并且提交 但是后端接收到的数据为空&#xff0c;后端接口也没有问题 但后端收…...

编程日记 2024/1/17 13:44:49

css3的过度效果transition支持哪些属性，Transition 所支持的css属性

transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下&#xff1a; 名称描述属性color: 通过红、绿、蓝和透明度组件变换&#xff08;每个数值处理&#xff09; 如&#xff1a; background-color, border-color, color, outline-co…...

编程日记 2024/1/17 13:43:48

JAVAEE初阶 文件IO(一)

这里写目录标题 一. 计算机中存储数据的设备1.1 CPU1.2 内存1.3 硬盘1.4 三种存储的区别 二.文件系统2.1 相对路径2.2 绝对路径2.3 .和..的含义2.4 例子2.5 everything工具 三.文件3.1 文本文件3.2 二进制文件 四. JAVA对于文件的API4.1 getParent getName getPath getAbsolute…...

编程日记 2024/1/17 13:42:47

使用WAF防御网络上的隐蔽威胁之CSRF攻击

在网络安全领域&#xff0c;除了常见的XSS&#xff08;跨站脚本&#xff09;攻击外&#xff0c;CSRF&#xff08;跨站请求伪造&#xff09;攻击也是一种常见且危险的威胁。这种攻击利用用户已经验证的身份在没有用户知情的情况下&#xff0c;执行非授权的操作。了解CSRF攻击的机…...

编程日记 2024/1/17 13:41:46

如何从 Keras 中的深度学习目录加载大型数据集

一、说明 数据集读取&#xff0c;使用、在磁盘上存储和构建图像数据集有一些约定&#xff0c;以便在训练和评估深度学习模型时能够快速高效地加载。本文介绍Keras 深度学习库中的ImageDataGenerator类等工具自动加载训练、测试和验证数据集。 二、ImageDataGenerator加载数据集…...

编程日记 2024/1/17 13:40:45

【大数据】Flink 详解（八）：SQL 篇 Ⅰ

《Flink 详解》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 10 10 10 篇文章&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&…...

编程日记 2024/1/17 13:37:42

如何从命令行运行testng.xml？

目录 创建一个新的java项目并从命令行运行testng.xml 使用命令行运行XML文件 从命令行运行现有maven项目的XML文件 在这篇文章中&#xff0c;我们将使用命令行运行testng.xml。有多种场景需要使用命令行工具运行testng.xml。也许您已经创建了一个maven项目&#xff0c;现在想…...

编程日记 2024/1/17 13:36:41

MongoDB-数据库文档操作（2）

任务描述 文档数据在 MongoDB 中的查询和删除。 相关知识 本文将教你掌握&#xff1a; 查询文档命令&#xff1b;删除文档命令。 查询文档 我们先插入文档到集合 stu1 &#xff1a; document([{ name:张小华, sex:男, age:20, phone:12356986594, hobbies:[打篮球,踢足球…...

编程日记 2024/1/17 13:33:39

文件包含介绍

本地文件包含 常见的文件包含漏洞的形式为 <?php include("inc/" . $_GET[file]); ?> 考虑常用的几种包含方式为 同目录包含file.htaccess目录遍历?file…/…/…/…/…/…/…/…/…/var/lib/locate.db日志注入?file…/…/…/…/…/…/…/…/…/var/log/a…...

编程日记 2024/1/17 13:32:38

C语言——小细节和小知识9

一、大小端字节序 1、介绍 在计算机系统中&#xff0c;大小端&#xff08;Endianness&#xff09;是指多字节数据的存储和读取顺序。它是数据在内存中如何排列的问题&#xff0c;特别是与字节顺序相关。C语言中的数据存储大小端字节序指的是在内存中存储的多字节数据类型&…...

编程日记 2024/1/17 13:28:35

实验室搬砖实录：手把手教你搞定柱层析，从TLC监测到梯度洗脱的保姆级避坑指南

实验室搬砖实录&#xff1a;手把手教你搞定柱层析&#xff0c;从TLC监测到梯度洗脱的保姆级避坑指南 记得第一次独立做柱层析时&#xff0c;盯着那根玻璃柱看了半小时&#xff0c;愣是没敢动手。TLC板上明明分得挺开的点&#xff0c;怎么一上柱子就全乱了&#xff1f;洗脱液极性…...

编程新知 2026/3/31 10:00:21

从零构建树莓派人脸识别门禁：硬件选型、环境部署与实战避坑

1. 硬件选型与采购清单 第一次玩树莓派人脸识别项目时&#xff0c;我在淘宝上花了整整三天对比各种硬件参数。当时最纠结的就是摄像头模块——普通USB摄像头才30块钱&#xff0c;而官方推荐的Raspberry Pi Camera Module V2要200多。后来实测发现&#xff0c;这差价真不能省。 …...

编程新知 2026/3/31 8:23:38

多平台资源嗅探与下载工具：解决网络资源获取难题的技术方案

多平台资源嗅探与下载工具&#xff1a;解决网络资源获取难题的技术方案 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: https://gitcod…...

编程新知 2026/3/31 8:03:27

Canvas Quest跨平台部署实践：从星图GPU到本地环境的迁移

Canvas Quest跨平台部署实践&#xff1a;从星图GPU到本地环境的迁移 1. 前言&#xff1a;为什么需要跨平台部署 最近遇到不少开发者朋友在问同一个问题&#xff1a;在星图GPU平台上跑得好好的Canvas Quest模型&#xff0c;怎么迁移到本地环境就各种报错&#xff1f;这其实是个…...

编程新知 2026/3/31 6:40:48

从编译错误到成功运行：手把手教你用CMake在Ubuntu 20.04上部署GeographicLib地理计算库

从编译错误到成功运行&#xff1a;手把手教你用CMake在Ubuntu 20.04上部署GeographicLib地理计算库 在Linux环境下部署开源库时&#xff0c;许多开发者会直接复制粘贴教程中的命令&#xff0c;却对背后的构建原理一知半解。以GeographicLib为例&#xff0c;这个被广泛应用于地理…...

编程新知 2026/3/31 5:18:10

告别手动记录！用CAPL脚本的file系列函数自动生成CANoe测试报告

告别手动记录&#xff01;用CAPL脚本的file系列函数自动生成CANoe测试报告 在汽车电子测试领域&#xff0c;工程师们每天都要面对海量的测试数据——从总线负载率到错误帧统计&#xff0c;从信号值波动到时间戳记录。传统的手动截图、复制粘贴方式不仅效率低下&#xff0c;还容…...

编程新知 2026/3/31 3:56:51

7个效率倍增技巧：StarRailAssistant自动化工具解放崩坏星穹铁道玩家双手

7个效率倍增技巧&#xff1a;StarRailAssistant自动化工具解放崩坏星穹铁道玩家双手 【免费下载链接】StarRailAssistant 崩坏&#xff1a;星穹铁道自动化 | 崩坏&#xff1a;星穹铁道自动锄大地 | 崩坏&#xff1a;星穹铁道锄大地 | 自动锄大地 | 基于模拟按键 项目地址: ht…...

编程新知 2026/3/31 2:38:03

MATLAB MultiDIC/Ncorr实战：从图像采集到应力应变云图生成的全流程解析

1. 数字图像相关技术入门指南 第一次接触数字图像相关&#xff08;DIC&#xff09;技术时&#xff0c;我完全被那些专业术语搞晕了。后来在实际项目中摸爬滚打才发现&#xff0c;这套技术本质上就是用相机"看"材料变形的过程。想象一下橡皮筋被拉伸时表面的斑点移动—…...

编程新知 2026/3/31 2:36:02

H5端微信登录实战：从配置到用户信息获取的全流程解析

1. 为什么需要H5端微信登录&#xff1f; 每次开发新项目时&#xff0c;用户注册环节总是让人头疼。传统的账号密码注册方式&#xff0c;不仅流程繁琐&#xff0c;还经常遇到用户忘记密码的问题。我在去年开发一个电商H5项目时&#xff0c;就发现超过60%的用户流失都发生在注册…...

编程新知 2026/3/31 2:31:41

从BIOS到BMC：手把手拆解Redfish协议在服务器开机时的‘数据握手’全过程

从BIOS到BMC&#xff1a;手把手拆解Redfish协议在服务器开机时的‘数据握手’全过程 凌晨3点的数据中心&#xff0c;一台刚上电的服务器正以毫秒级速度完成自检。在这不足5秒的瞬间里&#xff0c;BIOS与BMC之间正通过Redfish协议进行着精密的数据舞蹈——这不是简单的信息交换&…...

编程新知 2026/3/31 2:19:29