位置: IT常识 - 正文

【WebSocket 协议】Web 通信的下一步进化(websocket tcpsocket)

编辑:rootadmin
【WebSocket 协议】Web 通信的下一步进化

推荐整理分享【WebSocket 协议】Web 通信的下一步进化(websocket tcpsocket),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:websocket的协议,websocket的协议,websocket协议端口,websocket wss协议,websocket协议详解,websocketd,抖音websocket协议,websocket wss协议,内容如对您有帮助,希望把文章链接给更多的朋友!

标题【手动狗头🐶】,大佬轻饶

目录一、什么是 WebSocket ?二、WebSocket 应用场景?三、代码中的 WebSocket四、一个完美的案例:在线聊天程序实现服务器chat/index.js实现客户端chat/index.htmlchat/style.css最终效果

WebSocket 是基于单个 TCP 的双向计算机通信协议。

你可以在简单的谷歌、百度搜索中找到许多类似的定义,但是我想通过一些简单和明显的例子来说明这这些。

一、什么是 WebSocket ?

作为 HTML5 计划的一部分,开发的 WebSocket 规范引入了 WebSocket JavaScript 接口,该接口定义了一个全双工单套接字连接,通过该连接可以在客户端和服务器之间发送消息。

WebSocket 标准简化了双向 Web 通信和连接管理的大部分复杂性。

与 Comet 和 Ajax 相比,WebSocket 代表了 Web 通信的下一个进化步骤。当然每种技术都有其独特的功能。

WebSocket 从 ws:// 或 wss:// 开始。它是一个有状态的协议,这意味着客户端和服务器之间的连接将保持活动状态,直到它被任何一方(客户端或服务器)终止。客户端和服务器中的任何一个关闭连接后,连接都会从两端终止。

让我们举一个客户端与服务器通信的例子,客户端是一个网络浏览器,每当我们启动客户端和服务器之间的连接时,客户端与服务器进行握手并决定创建一个新的连接和这个连接将保持活动状态,直到被其中任何一个终止。当连接建立并处于活动状态时,通信将使用相同的连接通道进行,直到终止。

以下就是 WebSocket 连接所涉及的步骤。

客户端(浏览器)向服务器发送 HTTP 请求。通过 HTTP 协议建立连接。如果服务器支持 WebSocket 协议,则同意升级连接。(握手)现在握手已经完成,初始 HTTP 连接被使用相同底层 TCP/IP 协议的 WebSocket 连接替换。此时,数据可以在 Client 和 Server 之间自由来回流动。二、WebSocket 应用场景?

首先,在不使用 WebSocket 的情况下访问网站。 网页通常通过 HTTP 连接在 Internet 上传输。为此客户端会为您执行的每个操作向服务器发出请求。使用 HTTP 访问网站时,客户端必须先向服务器提交请求。然后服务器通过发送请求的连接来响应。换句话说,HTTP 在基本的请求和响应架构上运行,会导致大量延迟。

我举一个实在点的例子:

我们平时点外卖

0秒:食物到了吗?(客户) 0秒:正在配送。(外卖小哥) 1秒:食物到了吗?(客户) 1秒:正在配送。(外卖小哥) 2秒:食物到了吗?(客户) 2秒:正在配送。(外卖小哥) 3秒:食物到了吗?(客户) 3秒:是的,先生,这是您的外卖。(外卖小哥)

这就是我们常见的所说的 HTTP 轮询。

客户端向服务器重复请求并检查是否有任何消息要接收。

如您所见,这不是很有效。我们正在使用不必要的资源,失败的请求数量也很麻烦。

有没有办法克服这个问题?

是的,有一种轮询技术可以用来克服这个缺陷,它被称为 长轮询。即:长轮询基本上涉及向服务器发出 HTTP 请求,然后保持连接打开以允许服务器稍后响应(由服务器确定)。

长轮询版本:

0秒:食物到了吗?(客户) 3秒:是的,先生,这是您的外卖。(外卖小哥)

【WebSocket 协议】Web 通信的下一步进化(websocket tcpsocket)

尽管长轮询有效,但它在 CPU、内存和带宽方面消耗的非常高(因为我们在保持连接打开时阻塞了资源)。

那么我们的救星就是:WebSocket。

WebSocket 协议的情况有所不同,可以使用动态调用方法实时调用。客户端所要做的就是通过传输 WebSocket 协议的握手来与服务器建立连接。这种握手提供了数据传输所需的所有识别信息。

客户端(Web 浏览器)初始化连接,并定期发送“心跳”以告诉服务器连接始终处于活动状态,一旦建立连接,客户端和服务器(与 http 规范相反)可以向对方发送信息(也称为服务器推送)。

这也与客户端驱动的 xmlhttprequest (ajax) 不同:客户端询问服务器它的状态是否是最新的,如果不是则更新,握手后通道保持打开状态,以实现近乎恒定的通信。

这意味着服务器可以自行传递数据,而无需客户端请求。因此,如果服务器接收到新数据,它会将其传递给客户端,而无需客户端发出特殊请求。

是不是特别好?所以应用场景也就很明显了

聊天程序社交平台网络游戏… 所有凡是需要客户端与服务端实时通信的场景都可以使用三、代码中的 WebSocket

对于 WebSocket 代码的实现,我们只需要 (编程语言或者框架名 + WebSocket) 关键词搜索引擎检索一下 就可以实现

以下为不完整统计!仅供参考~

WebSocket 目前支持以下浏览器:

Internet Explorer:版本 10 或更高版本Firefox:版本 6 或更高版本Chrome:版本 14 或更高版本Opera:版本 12.10 或更高版本Safari:版本 6 或更高版本

在服务器端,WebSocket 可以与以下编程语言和框架一起使用:

Node.jsSocket.IOWebSocket-NodewsJavaJettyPythonpyWebSocketTornadoC++Libwebsockets四、一个完美的案例:在线聊天程序

服务端: node.js 前端: html+css+javascript

实现服务器

让我们开始写服务器代码 首先,创建一个名为chat的文件夹。进入此文件夹并通过在终端中输入 npm init 初始化项目,或者 yarn init 。 现在我们已经初始化了我们的应用程序。

我们需要准备两个包

npm install ws serve-handler

这里的 ws 它是 Node.js 的纯 WebSocket 实现。

根目录的 package.json 中记得加入 "type": "module"

chat/index.jsimport {createServer} from 'http';import staticHandler from 'serve-handler';import ws, {WebSocketServer} from 'ws';// 创建服务const server = createServer((req, res) => { return staticHandler(req, res, {public: 'public'})});// 创建一个WebSocket服务器const wss = new WebSocketServer({server})// 当有新的连接时wss.on('connection', (client) => { // 客户端连接 console.log('Client connected !') client.on('message', (msg) => { // 客户端发送消息 console.log(`Message:${msg}`); broadcast(msg) })})// 发送消息function broadcast(msg) { for (const client of wss.clients) { if (client.readyState === ws.OPEN) { client.send(msg) } }}server.listen(process.argv[2] || 8080, () => { console.log(`server listening...`);})实现客户端

接下来,是时候实现我们的聊天应用程序的客户端了。本质上是一个带有一些基本 JavaScript 代码的最小 HTML 页面。

chat/index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>聊天室</title> </head> <body> <div class="container"> <p class="msg">消息:</p> <div id="messages" class="messages"></div> <form id="msgForm" class="msgForm"> <input type="text" placeholder="Send message" class="input" id="inputBox"/> <input type="submit" class="btn" value="发送"> </form> </div> <script type="text/javascript"> // 初始化 const ws = new WebSocket(`ws://localhost:8000`); ws.binaryType = "blob"; // 连接成功 ws.addEventListener("open", event => { console.log("Websocket 连接打开"); }); // 关闭连接 ws.addEventListener("close", event => { console.log("Websocket 连接关闭"); }); // 消息事件 ws.onmessage = function (message) { const msgDiv = document.createElement('div'); msgDiv.classList.add('msgCtn'); // 获取消息 if (message.data instanceof Blob) { reader = new FileReader(); // 接收到消息时触发 reader.onload = () => { msgDiv.innerHTML = reader.result; document.getElementById('messages').appendChild(msgDiv); }; // 读取消息 reader.readAsText(message.data); } else { // 显示消息 console.log("Result2: " + message.data); msgDiv.innerHTML = message.data; document.getElementById('messages').appendChild(msgDiv); } } // 发送消息 const form = document.getElementById('msgForm'); form.addEventListener('submit', (event) => { event.preventDefault(); const message = document.getElementById('inputBox').value; // 发送 ws.send(message); document.getElementById('inputBox').value = '' }) </script> </body></html>

chat/style.css

接下来我们让页面变的好看一点

html { font-size: 62%;}body { margin: 0; padding: 0; display: flex; justify-content: center;}.container { margin-top: 5rem; display: flex; flex-direction: column; width: 30%; height: 70vh;}.msg { color: blueviolet; font-size: 2rem;}.msgCtn { margin: 1rem 0; color: white; padding: 1rem 1rem; background-color: blueviolet; border-radius: 6px; font-size: 2rem}.msgForm { display: flex; flex-direction: row;}.input { height: 100%; flex: 4; margin-right: 2rem; border: none; border-radius: .5rem; padding: 2px 1rem; font-size: 1.5rem; background-color: aliceblue;}.input:focus { background-color: white;}.btn { height: 5rem; flex: 1; display: flex; justify-content: center; align-items: center; border-radius: .5rem; background-color: blueviolet; color: whitesmoke; border: none; font-size: 1.6rem;}最终效果

让我们运行

node index.js 8000

然后运行 index.html 这个就不多描述了

打开两个窗口,效果如下:

本文链接地址:https://www.jiuchutong.com/zhishi/298821.html 转载请保留说明!

上一篇:JavaScript之Ajax-axios表单提交

下一篇:【愚公系列】华为云系列之基于ModelBox搭建的AI寻车系统(愚公全名)

  • 荣耀手机怎么开启陌生电话拦截(荣耀手机怎么开微信美颜视频功能)

    荣耀手机怎么开启陌生电话拦截(荣耀手机怎么开微信美颜视频功能)

  • 华为 nova 7 pro 5g有没有红外线功能(华为 nova 7 pro 5g快充)

    华为 nova 7 pro 5g有没有红外线功能(华为 nova 7 pro 5g快充)

  • r5 4600u相当于i几(r5-4600u相当于英特尔哪个处理器)

    r5 4600u相当于i几(r5-4600u相当于英特尔哪个处理器)

  • 苹果6与苹果6p的区别在于什么(苹果6与苹果6p的主板可以互换吗)

    苹果6与苹果6p的区别在于什么(苹果6与苹果6p的主板可以互换吗)

  • 华为手机看视频不能横屏怎么办(华为手机看视频手机震动)

    华为手机看视频不能横屏怎么办(华为手机看视频手机震动)

  • ipadpencil丢了可以找回吗(applepencil丢了可以找吗)

    ipadpencil丢了可以找回吗(applepencil丢了可以找吗)

  • mate20 pro上市时间

    mate20 pro上市时间

  • 如何查看微博缓存的视频(怎么查看微博缓存内容)

    如何查看微博缓存的视频(怎么查看微博缓存内容)

  • 1mbps等于多少kb(1Mbps等于多少bit)

    1mbps等于多少kb(1Mbps等于多少bit)

  • ps怎么去除摩尔纹(ps怎样去除摩尔纹)

    ps怎么去除摩尔纹(ps怎样去除摩尔纹)

  • 计算机病毒是什么(计算机病毒是什么代码)

    计算机病毒是什么(计算机病毒是什么代码)

  • 手机qq如何查看共同好友(手机qq如何查看已删除好友的聊天记录)

    手机qq如何查看共同好友(手机qq如何查看已删除好友的聊天记录)

  • 黑鲨2怎么隐藏应用(黑鲨怎么隐藏手机软件)

    黑鲨2怎么隐藏应用(黑鲨怎么隐藏手机软件)

  • vivonex3是单模还是双模(vivonex3s是单卡还是双卡)

    vivonex3是单模还是双模(vivonex3s是单卡还是双卡)

  • amdsvm有啥用(amd svm)

    amdsvm有啥用(amd svm)

  • 华硕win10重装系统(华硕win10重装系统按f几)

    华硕win10重装系统(华硕win10重装系统按f几)

  • 美团怎么跳过语音验证(美团怎么跳过语音播报)

    美团怎么跳过语音验证(美团怎么跳过语音播报)

  • 华为p30pro支持人脸识别吗(华为p30pro有没有智能机器人)

    华为p30pro支持人脸识别吗(华为p30pro有没有智能机器人)

  • 此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情(已解决)(此 google 帐号尚未与设备关联)

    此 Google 帐号尚未与设备关联。要安装应用,请先访问设备上的 Play 商店应用。 了解详情(已解决)(此 google 帐号尚未与设备关联)

  • lsasss.exe是什么进程 有什么用 lsasss进程查询(lsass.exe在哪个文件夹)

    lsasss.exe是什么进程 有什么用 lsasss进程查询(lsass.exe在哪个文件夹)

  • 宛如圣诞精灵的树干,乌克兰喀尔巴阡山脉 (© panaramka/Getty Images)(圣诞精灵什么意思)

    宛如圣诞精灵的树干,乌克兰喀尔巴阡山脉 (© panaramka/Getty Images)(圣诞精灵什么意思)

  • 【React】使用Next.js构建并部署个人博客(react extend)

    【React】使用Next.js构建并部署个人博客(react extend)

  • 偶然所得个人所得税会计分录
  • 实收资本的期末余额在借方还是贷方
  • 财产租赁合同印花税计税依据含税吗
  • 其他应收款属于应收账款吗
  • 在业跟续存有什么不一样
  • 增加固定资产原值账务处理
  • 递延收益的核算
  • 如何根据销售额降序排序
  • 没有社保的临时工值得干吗
  • 差额发票能不能报销
  • 预收账款转营业外收入账务处理
  • 应付中转是什么科目
  • 跨月专用发票怎么冲销
  • 企业开出的普票和专票对税额有影响吗
  • 注销公司需要提供股东身份证吗
  • 服务性单位从事的是餐饮中介服务
  • 税收的性质是哪一项
  • 营改增后房地产企业如何开票
  • 项目收入怎么算
  • 投资款怎样缴印花税?
  • 税控盘怎么打票
  • 土地配套费如何缴纳
  • 季度报税每个月还用计提吗
  • 变更办税人需要原办税人去吗
  • 混合销售举例说明
  • 购买债券投资的交易费用
  • pqv2isvc.exe - pqv2isvc是什么进程 有什么作用
  • wifi出现感叹号上不了网怎么办
  • 小规模纳税人需要缴纳个人所得税吗
  • 以非现金资产清偿债务的,债权人应当
  • 权益法转成本法为什么用账面价值
  • 工厂土地被抵押厂房怎么办
  • 目标检测算法的主要目的是找到图像中用户感兴趣的
  • 多表联动查询
  • 账面价值大于计税基础为啥为递延所得税负债
  • elementui表格自定义排序
  • 弥补以前年度亏损最多几年
  • 用友固定资产模块反结账
  • 子公司计入长期股权投资吗
  • (WebFlux)004、WebFilter踩坑记录
  • 企业会计准则每股收益
  • 小微企业短小频急
  • 高新企业申请流程
  • 电子发票额度余额怎么查
  • 销售旧货的增值税是销项税吗
  • 直接计入所有者权益的利得和损失
  • 代理运费增值税税率
  • 作废的金额包含在总额里面吗
  • 支付行业培训流程
  • 当月计提公积金下月发放怎么做分录
  • 企业收到补贴资金怎么办
  • 生产性生物资产折旧计入什么科目
  • 哪些单位需要缴纳残疾人保障金
  • 公司的三证合一是什么
  • sql语句的基本语法
  • mysql的ip怎么看
  • win2003r2企业版密钥
  • win2008r2密码忘了
  • 禁止Windows 打游戏怎么办
  • 苹果怎样快速移动应用到其他桌面
  • cleanmymac3激活码领取
  • w10系统每次启动都要选择系统
  • win7如何卸载打印机驱动程序
  • 在linux系统中
  • 内存一次性读多少字节
  • Android游戏开发pdf
  • linux执行多个脚本
  • python中的is和==的区别
  • jquery地址
  • node 操作mysql
  • 用python做斐波那契数列
  • 在谈到民族这个概念是我们一再指出
  • python搭建虚拟环境torch
  • 登陆界面android
  • 个体户定额怎么查询
  • 下抓两级抓深一层的工作机制的要求包括什么
  • 税务局取消办税人员
  • 12366是哪里的税务局
  • 市中区税务局办税大厅地址
  • 广州代理记账公司注册
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设