深入浅出WebSocket(实践聊天室demo)

文章目录

    • 什么是WebSocket?
      • WebSocket连接过程
    • WebSocket与Http的区别
    • 重连机制
      • 完整代码
      • 使用方法
    • 心跳机制
    • 实现聊天室demo(基于Socket.io)
    • 参考文章、视频
    • 小广告~

什么是WebSocket?

在这里插入图片描述

WebSocket 是一种在单个TCP连接上进行全双工通信的协议(计算机网络应用层的协议)

在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。(维基百科)

特点:

  1. 与HTTP协议有良好的兼容性,默认端口也是80和443,握手阶段采用HTTP协议
  2. 建立在TCP协议之上,服务端的实现比较容易

WebSocket连接过程

  1. 建立握手
    客户端发起HTTP请求,请求头中含有

    Connection: Upgrade
    Upgrade: Websocket
    Sec-WebSocket-Key:  xxx // 提供给服务器来验证是否收到一个有效的WebSockets请求
    Sec-WebSocket-Version: xxx  // 版本
    

    服务器收到之后,明白要升级websocket连接。向客户端发送101状态码的响应

    101 Switching Protocols
    Connection: Upgrade
    Upgrade: Websocket
    Sec-WebSocket-Accept: xxx
    

    之后就可以进行双端通信

WebSocket与Http的区别

在这里插入图片描述

  1. 二者都是基于TCP,都是应用层协议。但是websocket只是在建立握手时,数据是通过HTTP传输的。

重连机制

目的是防止WebSocket,断开连接时,能主动重连(区分主动断开,不进行重连)

完整代码

// 订阅发布--EventDispatcher
class EventDispatcher {listeners= {};addEventListener(type, listener) {  // 收集依赖if (!this.listeners[type]) {this.listeners[type] = [];}if (this.listeners[type].indexOf(listener) === -1) {this.listeners[type].push(listener);}}removeEventListener(type) {  // 清空依赖this.listeners[type] = [];}dispatchEvent(type, data) {  // 循环执行callbackconst listenerArray = this.listeners[type] || [];if (listenerArray.length === 0) return;listenerArray.forEach(listener => {listener

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CompletableFuture与CountDownLatch实现多任务并行执行

CompletableFuture与CountDownLatch实现多任务并行执行 前言:CountDownLatch可以实现多任务并行,最后收集结果。业务中更广泛的使用CompletableFuture来实现多任务并行 一、 CompletableFuture实现多任务异步执行 1.1 描述 CompletableFuture.supplyAsy…

RabbitMQ队列详细属性(重要)

RabbitMQ队列详细属性 1、队列的属性介绍1.1、Type:队列类型1.2、Name:队列名称1.3、Durability:声明队列是否持久化1.4、Auto delete: 是否自动删除1.5、Exclusive:1.6、Arguments:队列的其他属性&#xf…

重构代码之取消临时字段

在代码重构中,临时字段是一种常见的反模式。临时字段指的是一个类的字段在部分方法中会被赋值或使用,但在其他很多方法中却未被使用,导致代码的维护性和可读性变差。这种设计往往表明字段的存在是偶然的或局部的,而非类的真正属性…

springboot029基于springboot的网上购物商城系统

🍅点赞收藏关注 → 添加文档最下方联系方式领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅 项目视频 基于…

【大数据学习 | HBASE】habse的表结构

在使用的时候hbase就是一个普通的表,但是hbase是一个列式存储的表结构,与我们常用的mysql等关系型数据库的存储方式不同,mysql中的所有列的数据是按照行级别进行存储的,查询数据要整个一行查询出来,不想要的字段也需要…

二手交易平台测试用例设计和执行

🎄欢迎来到边境矢梦的csdn博文🎄 🎄追求开源思想和学无止境思想一直在提升技术的路上 🎄 🌈涉及的领域有:Java、Python、微服务架构和分布式架构思想、基本算法编程🌈 🎆喜欢的朋友可…

SpringBoot框架的简介及实现步骤

一,SpringBoot简介: Spring Boot 是一个由 Pivotal 团队开发的开源框架,它基于 Spring 框架,旨在简化新 Spring 应用的初始搭建以及开发过程。Spring Boot 提供了多种特性来帮助开发者快速地创建独立的、生产级别的基于 Spring 的应用。 在…

npm常用函数定义手册(持续更新)

使用国内源 # 查询当前使用的镜像源 npm get registry # 设置为淘宝镜像源 npm config set registry https://registry.npmmirror.com/ # 还原为官方镜像源 npm config set registry https://registry.npmjs.org/ sql.js npm install sql.js

蓝牙FTP 协议详解及 Android 实现

文章目录 前言一、什么是蓝牙 FTP 协议?二、FTP 的工作流程1.蓝牙设备初始化2. 设备发现与配对3. 建立OBEX FTP 连接4. 文件传输文件上传(通过OBEX PUT命令)文件下载(通过OBEX GET命令) 5. 关闭OBEX会话 三、进阶应用与…

七大AI知识库工具概览

在数字化转型的浪潮中,企业越来越注重知识管理的重要性。以下是七款各具特色的AI知识库工具,它们通过智能化手段助力企业在知识管理、团队协作及客户服务等方面取得显著成效。 HelpLook AI知识库 概述:作为一款SaaS软件,HelpLook…

[NewStar 2024] week5完结

每次都需要用手机验证码登录&#xff0c;题作的差不多就没再进过。今天把week5解出的部分记录下。好像时间过去很久了。 Crypto 没e也能完 这题给了e,p,q,dp,dq。真不清楚还缺啥 long_to_bytes(pow(c,dp,p)) 格格你好棒 给了a,b和提示((p2*r) * 3*a q) % b < 70 其中r…

26.校园快递物流管理系统(基于SSM和Vue的Java项目)

目录 1.系统的受众说明 2.相关技术 2.1 JAVA简介 2.2 SSM三大框架 2.3 MyEclipse开发环境 2.4 Tomcat服务器 2.5 MySQL数据库 2.6访问数据库实现方法 3. 系统分析 3.1 需求分析 3.2 系统可行性分析 3.2.1技术可行性&#xff1a;技术背景 3.2.2经济可行性…

数据编排与ETL有什么关系?

数据编排作为近期比较有热度的一个话题&#xff0c;讨论度比较高&#xff0c;同时数据编排的出现也暗示着数字化进程的自动化发展。在谈及数据编排时&#xff0c;通常也会谈到ETL&#xff0c;这两个东西有相似点也有不同点。 数据编排和ETL&#xff08;提取、转换、加载&#x…

CSS教程(二)- CSS选择器

1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器&#xff0c;根…

材质(二)——材质参数化,从源材质继承生成不同的材质实例

继承原材质&#xff0c;对外提供参数。 更改调制不同的参数&#xff0c;生成不同的材质实例。 类似于&#xff0c;类的继承。有一个基类Base.继承生成为子类 A_Base,B_Base,C_Base

鸿蒙笔记--Scroll

这一节了解一下Scroll控件,在鸿蒙&#xff08;HarmonyOS&#xff09;开发中&#xff0c;Scroll控件是一个重要的可滚动容器组件&#xff0c;它允许在子组件的布局尺寸超过父组件尺寸时提供滚动功能。 scrollable&#xff1a; 含义&#xff1a;控制Scroll组件的滚动方向。 可选…

WordPress 2024主题实例镜像

目录 隐藏 1 WordPress 2024主题实例镜像启用的插件 2 WordPress 2024主题实例镜像截图 WordPress 2024主题实例镜像启用的插件 WordPress 2024主题实例镜像启用了2024主题&#xff0c;配置了&#xff1a; Akismet 反垃圾评论插件 Admin Notices Manager仪表盘通知隐藏…

Java 基于 SpringBoot+Vue 的水果在线销售系统开发(附源码,文档)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

如何用Python代码计算文件的SHA256?

以下是使用 Python 计算文件的 SHA256 哈希值的例子。代码的功能是利用Python代码计算文件的SHA256&#xff0c;同时将结果打印到屏幕和文件。 import hashlib import sysdef calculate_sha256(file_path):sha256_hash hashlib.sha256()with open(file_path, "rb")…

腾讯云nginx SSL证书配置

本章教程,记录在使用腾讯云域名nginx证书配置SSL配置过程。 一、nginx配置 域名和证书,替换成自己的即可。证书文件可以自定义路径位置。服务器安全组或者防火墙需要开放80和443端口。 server {#SSL 默认访问端口号为 443listen 443 ssl; #请填写绑定证书的域名server_name c…