HTML学习笔记(九) Web Socket

简介: HTML学习笔记(九) Web Socket

WebSocket 是一个建立在 TCP 之上进行全双工通讯的应用层协议


我们知道,HTTP 协议采用的是请求/响应模式,服务端是不能主动向客户端推送数据的


若要实现推送功能,一般都是采用 Ajax 轮询,但这样频繁的请求会给服务端带来极大的压力


WebSocket 协议就是为了解决这种类似的场景而出现的,它允许服务端可以主动向客户端推送数据


浏览器和服务器通过一次握手,就能在两者之间创建持续性的连接,进行双向数据传输,直至任意一方将其关闭


目前,基于 SHA 加密方式的握手协议是使用最为广泛的,具体的过程如下:


  • 浏览器向服务器发起一个 HTTP 请求,但是这个请求与普通的请求不同,它会附加一些头部信息
  • 服务器解析头部信息,返回一个响应,这样就能建立起 WebSocket 连接


一个典型的客户端请求如下:

GET ws://localhost:5000 HTTP/1.1
Host: localhost
Origin: http://localhost:5000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: 随机字符串
Sec-WebSocket-Version: 13


  • Connection:必须设置为 Upgrade,表示客户端希望升级协议
  • Upgrade:必须设置为 websocket,表示希望将协议升级为 Websocket
  • Sec-WebSocket-Key:随机字符串,与响应中 Sec-WebSocket-Accept 的值做对比验证


一个典型的服务端响应如下:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 根据 Sec-WebSocket-Key 计算得到
Sec-WebSocket-Location: ws://localhost:5000


  • Connection:如果值为 Upgrade,表示服务端同意升级协议
  • Upgrade:如果值为 websocket,表示同意将协议升级为 Websocket
  • Sec-WebSocket-Accept:经过服务器确认并加密的 Sec-WebSocket-Key


在理解了原理之后,我们下面再来看一下具体要怎么使用 WebSocket


在客户端浏览器中,可以通过构造函数 WebSocket() 创建一个对象


其中,参数 url 用于指定连接地址,参数 protocol 用于指定可接受的子协议


WebSocket(url, [protocol])

构造函数返回一个 WebSocket 对象,该对象常用的属性和方法如下:


readyState:只读属性,表示连接状态


0 表示连接尚未建立,1 表示连接已经建立,可以进行通信

2 表示连接正在关闭,3 表示连接已经关闭,或者不能打开


bufferedAmount:只读属性,在缓存中等待传输的字节数


onopen:指定 open 事件的监听函数,在连接建立时触发


onmessage:指定 message 事件的监听函数,在收到数据时触发


onerror:指定 error 事件的监听函数,在发生错误时触发


onclose:指定 close 事件的监听函数,在连接关闭时触发


send():发送数据

close():关闭连接

var ws = new WebSocket('ws://localhost:5000')
ws.onopen = function(event) { 
    console.log('open')
}
ws.onmessage = function(event) {
    console.log('message', event.data)
    ws.send('Goodbye')
    ws.close()
}
ws.onclose = function(event) {
  console.log('close')
}; 
ws.onerror = function(event) {
  console.log('error')
}

而对于服务器而言,WebSocket 只是一种协议而已,不同的语言和不同的框架会有不同的实现

下面我们以 Node.js 为例,写一个简单的 Demo

var express = require('express')
var expressWs = require('express-ws')
var app = express()
expressWs(app)
app.ws('/', function (ws, req){
    // ws:  WebSocket 实例
    // req:Request 实例
    ws.send('Hello')
    ws.on('message', function (msg) {
        console.log(msg)
    })
})
var server = app.listen(5000, '127.0.0.1', function() {
    console.log('server running at http://127.0.0.1:5000')
})

文章知识点与官方知识档案匹配,可进一步学习相关知识

目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
59 5
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
4月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
51 0
|
4月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
178 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
4月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
57 0
|
4月前
|
Python
Socket学习笔记(二):python通过socket实现客户端到服务器端的图片传输
使用Python的socket库实现客户端到服务器端的图片传输,包括客户端和服务器端的代码实现,以及传输结果的展示。
220 3
Socket学习笔记(二):python通过socket实现客户端到服务器端的图片传输
|
4月前
|
JSON 数据格式 Python
Socket学习笔记(一):python通过socket实现客户端到服务器端的文件传输
本文介绍了如何使用Python的socket模块实现客户端到服务器端的文件传输,包括客户端发送文件信息和内容,服务器端接收并保存文件的完整过程。
247 1
Socket学习笔记(一):python通过socket实现客户端到服务器端的文件传输
|
4月前
|
移动开发 监控 安全
HTML5 WebSocket详解
**WebSocket** 是一种协议,支持浏览器与服务器间的双向全双工通信。不同于传统的 HTTP 模式,WebSocket 建立持久连接,使服务器能主动向客户端推送数据。本文详细解析 WebSocket 的工作原理、优缺点及应用场景,并提供客户端和服务器端的代码示例。WebSocket 适合实时聊天、在线游戏、数据监控等场景,能显著提升用户体验和应用性能,但需注意其实现复杂性和安全性问题。
|
4月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55