深入浅出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.rhkb.cn/news/468258.html

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

相关文章

[CKS] Audit Log Policy

最近准备花一周的时间准备CKS考试,在准备考试中发现有一个题目关于audit policy的题目。 What’s the audit policy 使用K8s Audit Policy,管理员可以定义哪些操作需要被审计,包括创建、删除、更新和查看集群中的资源。审计记录包括操作的时…

【C++】map和set的介绍及使用

前言: map和 set 是 C STL(标准模板库)中的两种非常重要的容器,它们基于一种叫做平衡二叉搜索树(通常是红黑树)的数据结构来实现。在 C 中,map 是一个键值对容器,set 只存储唯一的键…

ai外呼机器人的作用有哪些?

ai外呼机器人具有极高的工作效率。日拨打成千上万通不是问题,同时,机器人还可以快速筛选潜在客户,将更多精力集中在有价值的客户身上,进一步提升营销效果。183-3601-7550 ai外呼机器人的作用: 1、搭建系统&#xff0c…

QT版发送邮件程序

简单的TCP邮箱程序 **教学与实践目的:**学会网络邮件发送的程序设计技术。 1.SMTP协议 邮件传输协议包括 SMTP(简单邮件传输协议,RFC821)及其扩充协议 MIME; 邮件接收协议包括 POP3 和功能更强大的 IMAP 协议。 服务…

汽车牌照识别系统的设计与仿真(论文+源码)

1设计原理 车牌识别系统的设计是一项利用车辆的动态视频或者静态图像实现牌照区域定位车牌号码识别的技术。其硬件部分通常包括触发设备、拍摄设备、照明设备、图像收集设备、进行车牌号码识别的处理器等,其软件的关键部分包含车牌区域定位的算法、车牌字符的分割算…

vue通过iframe方式嵌套grafana图表

文章目录 前言一、iframe方式实现xxx.xxx.com拒绝连接登录不跳转Cookie 的SameSite问题解决不显示额外区域(kiosk1) 前言 我们的前端是vue实现的,监控图表是在grafana中的,需要在项目web页面直接显示grafana图表 一、iframe方式实现 xxx.xxx.com拒绝连…

学习笔记:黑马程序员JavaWeb开发教程(2024.11.9)

9.1 Mybatis-基础操作-环境准备 这里也没做,到时候写案例,如果需要环境配置什么的,可以看看这个 9.2 Mybatis-基础操作-删除 删除需要动态获取需要删除的id,使用方法传参,#{}的方式实现 在编写的delete方法中&a…

[Docker#3] LXC | 详解安装docker | docker的架构与生态

目录 1.LXC容器操作 安装LXC LXC容器操作步骤 2.理论 LXC 是什么? Docker 是什么 Docker 和虚拟机的区别 Docker 和 JVM 虚拟化的区别 Docker 版本 ⭕Docker 官方网站(建议收藏) Docker 架构 生活案例 Docker 生态 Docker 解决…

Spark的学习-02

Spark Standalone集群的安装 架构:普通分布式主从架构 主:Master:管理节点:管理从节点、接客、资源管理和任务 调度,等同于YARN中的ResourceManager 从:Worker:计算节点:负责利用自己…

白杨SEO:百度在降低个人备案类网站搜索关键词排名和流量?怎样应对?【参考】

很久没有写百度或者网站这块内容了,一是因为做百度网站朋友越来越少,不管是个人还是企业;二是百度上用户搜索与百度给到网站的流量都越来越少。 为什么想到今天又来写这个呢?因为上个月有个朋友来咨询我说网站百度排名全没了&…

一个怀旧,俺的第一个共享软件

今天网友说起了 福彩双色球的程序。俺就想起这个来了,这是俺的第一个共享软件,收入大约15000。在当时来说,速度算是最快的。有些地方用了汇编优化(题外话,最近俺看到新闻,FFmpeg的作者也用汇编优化 性能提升…

QCustomPlot添加自定义的图例,实现隐藏、删除功能(二)

文章目录 QCustomPlot初识和基本效果图实现步骤:详细代码示例:实现原理和解释:使用方法:其他参考要实现一个支持复选框来控制曲线显示和隐藏的自定义 QCPLegend 类,可以通过继承 QCPLegend 并重写绘制和事件处理方法来实现,同时发出信号通知曲线的状态变更。 QCustomPl…

96.【C语言】存储体系结构

目录 1.金字塔图 2.形象理解的图 3.分析 4.推荐阅读 1.金字塔图 2.形象理解的图 3.分析 缓存的大小<<内存的大小 缓存分三级:速度:一级>二级>三级 在95.【C语言】数据结构之双向链表的头插,头删,查找,中间插入,中间删除和销毁函数文章遗留了一个问题,缓存命…

智能合约在供应链金融中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 智能合约在供应链金融中的应用 智能合约在供应链金融中的应用 智能合约在供应链金融中的应用 引言 智能合约概述 定义与原理 发展…

ODOO学习笔记(4):Odoo与SAP的主要区别是什么?

Odoo 和 SAP 都是知名的企业资源规划&#xff08;ERP&#xff09;软件&#xff0c;它们之间存在以下一些主要区别&#xff1a; Odoo与SAP的区别 一、功能特点 功能广度 Odoo&#xff1a;提供了一整套全面的业务应用程序&#xff0c;涵盖了销售、采购、库存管理、生产、会计、…

Leetcode 买卖股票的最佳时机 Ⅱ

使用贪心算法来解决此问题&#xff0c;通过在价格上涨的每一天买入并在第二天卖出的方式&#xff0c;累计所有上涨的利润&#xff0c;以实现最大收益。关键点是从第二天开始遍历&#xff0c;并且只要当前比前一天价格高&#xff0c;我们就在前一天买入然后第二天卖出去。下面是…

Unity常见问题合集(一)

PS&#xff1a;不定期更新...... 目录 &#xff08;1&#xff09;无法关闭自动编译&#xff08;Edit — Preference — General — Auto Refresh&#xff09; &#xff08;1&#xff09;无法关闭自动编译&#xff08;Edit — Preference — General — Auto Refresh&#xff0…

库打包工具 rollup

库打包工具 rollup 摘要 **概念&#xff1a;**rollup是一个模块化的打包工具 注&#xff1a;实际应用中&#xff0c;rollup更多是一个库打包工具 与Webpack的区别&#xff1a; 文件处理&#xff1a; rollup 更多专注于 JS 代码&#xff0c;并针对 ES Module 进行打包webpa…

软件工程 软考

开发大型软件系统适用螺旋模型或者RUP模型 螺旋模型强调了风险分析&#xff0c;特别适用于庞大而复杂的、高风险的管理信息系统的开发。喷泉模型是一种以用户需求为动力&#xff0c;以对象为为驱动的模型&#xff0c;主要用于描述面向对象的软件开发过程。该模型的各个阶段没有…

“高级Java编程复习指南:深入理解并发编程、JVM优化与分布式系统架构“

我的个人主页 接下来我将方享四道由易到难的编程题&#xff0c;进入我们的JavaSE复习之旅。 1&#xff1a;大小写转换------题目链接 解题思路&#xff1a; 在ASCII码表中&#xff0c;⼤写字⺟A-Z的Ascii码值为65- 90&#xff0c;⼩写字⺟a-z的Ascii码值为97-122。每个字 ⺟…