深入浅出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,一经查实,立即删除!

相关文章

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 的应用。 在…

七大AI知识库工具概览

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

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技术可行性:技术背景 3.2.2经济可行性…

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

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

CSS教程(二)- CSS选择器

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

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

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

WordPress 2024主题实例镜像

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

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

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

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

以下是使用 Python 计算文件的 SHA256 哈希值的例子。代码的功能是利用Python代码计算文件的SHA256,同时将结果打印到屏幕和文件。 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…

【双十一特惠】腾讯云省钱攻略:如何智取云计算资源

前言 双十一不仅是购物的狂欢节,对于云计算用户来说,更是一个节省成本的绝佳时机。腾讯云,作为国内领先的云计算服务商,每年双十一都会推出一系列优惠活动。本文将为您揭开如何在这个购物节中,最大化利用腾讯云的优惠…

032集——圆转多段线(Circle to Polyline)(CAD—C#二次开发入门)

CAD中圆可转为带有凸度的多段线以方便后期数据计算、处理&#xff0c;效果如下&#xff1a; 白色为圆&#xff0c;红色为转换后的多段线&#xff08;为区分&#xff0c;已手工偏移多段线&#xff09; public static void XX(){var curves Z.db.SelectEntities<Entity>…

【极客兔兔-Web框架Gee详解】Day2 上下文Context

文章目录 一、框架结构二、设计上下文(Context):day2-context/gee/context.go1. 设计Context必要性1.1 接口粒度过细:1.2 缺乏扩展性:2. 代码3. 优势三、路由(Router): day2-context/gee/router.go四、框架入口:day2-context/gee/gee.go1. 代码五、框架使用: day2-context/m…

HTB:Sightless[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机TCP端口进行开放扫描 继续使用nmap对靶机开放的TCP端口进行脚本、服务扫描 首先尝试对靶机FTP服务进行匿名登录 使用curl访问靶机80端口 使用浏览器可以直接访问该域名 使用浏览器直接访问该子域 Getshell 横向移动 查…

Oracle视频基础1.4.4练习

1.4.4 [dbs] 删干净上次创建的bbk ll rm -f *dbf ll rm -f spfilebbk.ora clear ll创建bbk的pfile&#xff0c;准备对应的目录 ll strings spfilewilson.ora | more strings spfilewilson.ora > initbbk.ora :%s/wilson/bbk :%s/*\.//g :wq ll vi initbbk.ora####### 创…

【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--角色可访问接口管理

咱们继续来编写孢子记账的简易权限&#xff0c;这篇文章中我们将编写角色可访问接口的管理API&#xff0c;同样我不会把完整的代码全都列出来&#xff0c;只会列出部分代码&#xff0c;其余代码我希望大家能自己手动编写&#xff0c;然后对比项目代码。废话不多说&#xff0c;开…