HTML5 WebSocket

HTML5 WebSocket 是一种基于 Web的协议,它使得客户端和服务器之间能够建立一个持久的、双向的通信连接。这意味着客户端和服务器可以随时相互发送数据,而无需像传统的 HTTP请求那样,每次都要重新建立连接。WebSocket 协议在实时应用程序中非常有用,比如即时聊天、在线游戏、金融应用等。

1 WebSocket 的基本工作原理

  1. 连接建立:
  • 客户端向服务器发起一个 WebSocket 握手请求,使用 HTTP 协议。握手请求的一个关键点是客户端会请求一个 Upgrade

    头,将协议从 HTTP 升级为 WebSocket。

  • 如果服务器支持 WebSocket,它会响应一个 HTTP 101 状态码(切换协议),然后连接正式建立,之后客户端和服务器之间的通信就变成了 WebSocket 协议。

  1. 双向通信:
  • 一旦 WebSocket 连接建立,客户端和服务器可以通过这个持久连接发送消息。通信是全双工的,即双方可以同时发送和接收数据。
  1. 连接关闭:
  • 客户端或服务器可以发起连接关闭请求,结束 WebSocket 通信。关闭时,双方会交换一段消息来确认关闭过程。

2 WebSocket 基本 API

HTML5 WebSocket API 提供了创建 WebSocket 连接、发送和接收消息、以及处理连接关闭和错误的功能。以下是 WebSocket API 的基本用法:

javascript 复制代码
// 创建 WebSocket 连接
let socket = new WebSocket('ws://example.com/socket');

// 监听连接打开事件
socket.onopen = function(event) {
    console.log('连接已建立');
    // 发送数据
    socket.send('Hello, Server!');
};

// 监听服务器发送的消息
socket.onmessage = function(event) {
    console.log('收到消息: ', event.data);
};

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log('连接已关闭', event);
};

// 监听错误事件
socket.onerror = function(error) {
    console.log('发生错误: ', error);
};

// 关闭连接
socket.close();

关键点解释

  1. WebSocket 构造函数:
  • new WebSocket(url) 用于创建 WebSocket 对象,其中 url 是服务器的 WebSocket 地址,通常是以 ws:// 或 wss:// 开头。
javascript 复制代码
ws:// 是 WebSocket 的非加密协议。
javascript 复制代码
wss:// 是 WebSocket 的加密协议,类似于 HTTPS。
  1. 事件处理器:
  • onopen: 连接成功建立后触发。

  • onmessage:接收到消息时触发。

  • onerror:发生错误时触发。

  • onclose:连接关闭时触发。

  1. 发送消息:

socket.send(data) 用于发送数据到服务器。数据可以是文本或二进制数据(如 Blob 或 ArrayBuffer)。

  1. 关闭连接:
  • socket.close() 用于关闭 WebSocket 连接,通常在通信完成或页面卸载时调用。

3 WebSocket 与 HTTP 协议的区别

特性 WebSocket HTTP
协议类型 ws:// 或 wss:// http:// 或 https://
连接方式 双向持久连接 每次请求都建立和断开连接
数据交换 双向数据传输(全双工) 单向请求-响应模型(半双工)
性能 更高效,减少了重复建立连接的开销 每个请求都需要独立的连接,效率较低
实时性 支持实时数据传输 通常用于请求-响应模式,不适合实时应用
相关推荐
机智的奎哥6 分钟前
微信小程序实现长按录音,点击播放等功能,CSS实现语音录制动画效果
前端·javascript·css·微信·微信小程序·小程序
XDU小迷弟43 分钟前
第30天:PHP应用&组件框架&前端模版渲染&三方插件&富文本编辑器&CVE审计
开发语言·前端·网络安全·php
明月看潮生1 小时前
青少年编程与数学 02-006 前端开发框架VUE 09课题、计算属性
前端·javascript·vue.js·青少年编程·编程与数学
布兰妮甜1 小时前
Three.js - 打开Web 3D世界的大门
前端·javascript·3d·动画·three.js
小皮虾1 小时前
几行代码封装,让小程序云函数变为真正云函数,开发体验直接起飞
前端·javascript·微信小程序
Traced back1 小时前
在vue3项目中利用自定义ref实现防抖
前端·javascript·vue.js
木易66丶2 小时前
Vue中el-tree结合vuedraggable实现跨组件元素拖拽
前端·笔记
黑客KKKing2 小时前
网络安全-web应用程序发展历程(基础篇)
前端·安全·web安全
长风清留扬2 小时前
小程序开发-页面事件之上拉触底实战案例
前端·javascript·css·ios·微信小程序·小程序·html
时间sk2 小时前
CSS——25.伪元素1(“::first-letter ,::first-line ”)
前端·javascript·css