1. 前言🔥
对于很多小伙伴来说,项目现在都普遍前后端分离,各干各的事儿,在前后端进行服务调用才会有大面积的碰头,后端接口数据格式发生变更要通知前端,相反,前端有变化要告诉后端,这来回修改沟通起来通道要么线下,要么线上,但是这都不是最高效的通信,你们知道还可以怎么提升沟通效率嘛?今天我就给大家讲讲它--WebSocket,让你直接可通过它无延迟来达成前后端的高效沟通过,基本搭建这套微聊天几乎零成本,你心动了么?如果你想学你可以接着往下看呢。
这将又会是干货满满的一期,全程无尿点不废话只抓重点教,具有非常好的学习效果,拿好小板凳准备就坐!希望学习的过程中大家认真听好好学,学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信,bug菌将第一时间给予解惑,那么废话不多说,直接开整!Fighting!!
2. 环境说明🔥
本地的开发环境:
- 开发工具:IDEA 2021.3
- JDK版本: JDK 1.8
- Spring Boot版本:2.3.1 RELEASE
- Maven版本:3.8.2
3. 正文🔥
3.1 概念
什么是WebSocket?可能没有接触过的同学会对它很陌生,但是你找上了我,我便不会让你失望。
- WebSocket 是HTML5下一种新的协议,本质上它是独立的、创建在 TCP 上的一种协议(一种网络通信协议,注意区别http)。
- 通过HTTP/1.1 协议的101状态码进行握手。
- 为了达成WebSocket连接,需要浏览器发出请求后服务器进行回应,此过程也称握手。
- WebSocket 是一种持久化协议。
- WebSocket 实现了浏览器与服务器之间全双工通信,能够更好的节省服务器资源和带宽,以此达到实时通讯的目的。
3.2 原理
很多网站实现推送技术功能都是通过轮询(不懂的可看下方拓展)的方式,但此方式就需要浏览器不断的向服务器发送请求,然而http请求可能包含较长的头部等信息,而真正有效的数据可能就很小部分,如此一来,来回请求也就严重浪费了很多服务器资源和带宽等。
接着给大家科普一下,什么是轮询?
轮询:就是在特定的时间间隔里,由浏览器对服务器发起HTTP请求,然后由服务器返回最新的数据给客户端的浏览器,总而言之就是定时发送请求服务器进行查询。
接着用比较新的技术去做轮询的方式可能就是属Comet了。Comet虽然可以进行双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,这种方式也极大的耗服务器资源。
即在这些情况下,HTML5因此定义了一种WebSocket协议,此协议不但能更好的节省服务器资源和带宽,也能够更实时地进行通讯。
通常Websocket 使用 ws 或 wss 的统一资源标志符(URI),其中 wss 表示使用了 TLS 的 Websocket。如:
ws://echo.websocket.org wss://echo.websocket.org
其中WebSocket 与 HTTP 和 HTTPS 使用相同的 TCP 端口,可以绕过大多数防火墙的限制。默认情况下:
1)WebSocket 协议使用 80 端口;
2)若运行在 TLS 之上时,默认使用 443 端口。
3.3 特点
既然WebSocket协议问世,那肯定是有比目前某些协议方式有优势,如下我来给大家罗列一下,它有哪些特点。具体如下:
- 较少的控制开销。
- 更强的实时性。
- 保持连接状态。
- 更好的二进制支持。
- 支持扩展。
- 更好的压缩效果。
3.4 优势
谈到WebSocket,肯定得论它的优势之处了,因为知道WebSocket最大的优势就是服务器可以主动向客户端推送消息,相反,客户端也能主动向服务器推送消息。
其次,使用WebSocket可以在服务器与客户端之间建立一个非http的双向连接桥梁,这个连接是实时的,也可以是永久的,除非你手动关闭连接。
3.5 WebSocket的前端API
3.5.1 建立连接
使用new webSocket(url)创建webSocket连接。
var url = "wss://echo.websocket.org";
var websocket = new WebSocket(url);
3.5.2 推送消息
通过send()方法向服务器发送消息。
websocket.send("data");
3.5.3 接收服务器传过来的数据
使用message事件,获得服务端消息。
websocket.onmessage = function(event) {
var data = event.data;
};
3.5.4 监听socket的打开事件
websocket.onopen = function(event) {
// 开始通信时的处理
}
3.5.5 监听socket的关闭事件
websocket.onclose = function(event) {
// 通信结束时的处理
}
3.5.6 关闭socket
close事件,主动断开或被动断开。
websocket.close();
3.5.7 WebSocket的状态
可以通过读取readyState的属性值来获取WebSocket对象的状态,readyState属性存在以下几种属性值。
- CONNECTING(数字值为0),表示正在连接;
- OPEN(数字值为1),表示已建立连接;
- CLOSING(数字值为2),表示正在关闭连接;
- CLOSED(数字值为3),表示已关闭链接。
4. 热文推荐🔥
滴~如下推荐【Spring Boot 进阶篇】的学习大纲,请小伙伴们注意查收。
Spring Boot进阶(01):Spring Boot 集成 Redis,实现缓存自由
Spring Boot进阶(02):使用Validation进行参数校验
Spring Boot进阶(03):如何使用MyBatis-Plus实现字段的自动填充
Spring Boot进阶(04):如何使用MyBatis-Plus快速实现自定义sql分页
Spring Boot进阶(05):Spring Boot 整合RabbitMq,实现消息队列服务
Spring Boot进阶(06):Windows10系统搭建 RabbitMq Server 服务端
Spring Boot进阶(07):集成EasyPoi,实现Excel/Word的导入导出
Spring Boot进阶(08):集成EasyPoi,实现Excel/Word携带图片导出
Spring Boot进阶(09):集成EasyPoi,实现Excel文件多sheet导入导出
Spring Boot进阶(10):集成EasyPoi,实现Excel模板导出成PDF文件
Spring Boot进阶(11):Spring Boot 如何实现纯文本转成.csv格式文件?
Spring Boot进阶(12):Spring Boot 如何获取Excel sheet页的数量?
Spring Boot进阶(13):Spring Boot 如何获取@ApiModelProperty(value = “序列号“, name = “uuid“)中的value值name值?
Spring Boot进阶(14):Spring Boot 如何手动连接库并获取指定表结构?一文教会你
Spring Boot进阶(15):根据数据库连接信息指定分页查询表结构信息
Spring Boot进阶(16):Spring Boot 如何通过Redis实现手机号验证码功能?
Spring Boot进阶(17):Spring Boot如何在swagger2中配置header请求头等参数信息
Spring Boot进阶(18):SpringBoot如何使用@Scheduled创建定时任务?
Spring Boot进阶(19):Spring Boot 整合ElasticSearch
Spring Boot进阶(20):配置Jetty容器
Spring Boot进阶(21):配置Undertow容器
Spring Boot进阶(22):Tomcat与Undertow容器性能对比分析
Spring Boot进阶(23):实现文件上传
Spring Boot进阶(24):如何快速实现多文件上传?
Spring Boot进阶(25):文件上传的单元测试怎么写?
Spring Boot进阶(26):Mybatis 中 resultType、resultMap详解及实战教学
Spring Boot进阶(27):Spring Boot 整合 kafka(环境搭建+演示)
Spring Boot进阶(28):Jar包Linux后台启动部署及滚动日志查看,日志输出至实体文件保存
Spring Boot进阶(29):如何正确使用@PathVariable,@RequestParam、@RequestBody等注解?不会我教你,结合Postman演示
Spring Boot进阶(30):@RestController和@Controller 注解使用区别,实战演示
...
5. 文末🔥
如果想系统性的学习Spring Boot,小伙伴们直接订阅bug菌专门为大家创建的Spring Boot专栏《滚雪球学Spring Boot》从入门到精通,从无到有,从零到一!以知识点+实例+项目的学习模式由浅入深对Spring Boot框架进行学习&使用。
我是bug菌,一名想走👣出大山改变命运的程序猿。接下来的路还很长,都等待着我们去突破、去挑战。来吧,小伙伴们,我们一起加油!未来皆可期,fighting!
关注公众号,获取最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等硬核资源