WebSocket 技术详解

简介: 【2月更文挑战第12天】

WebSocket 技术详解

1. 简介

WebSocket 是一种基于 TCP 的应用层协议,它实现了浏览器与服务器的全双工通信,即允许服务器主动向客户端发送信息。 因此,WebSocket 可以用来构建实时通信、消息推送等应用。

WebSocket 协议的出现,解决了传统 HTTP 协议在实时通信场景下的缺陷。 HTTP 协议是一种单向通信协议,即客户端只能向服务器发送请求,服务器只能响应客户端的请求。 因此,在传统的 HTTP 协议下,如果要实现实时通信,则需要客户端不断地向服务器发送请求,这会造成很大的资源浪费。

WebSocket 协议的优势在于:

  • 全双工通信: 客户端和服务器可以同时发送和接收数据。
  • 低资源消耗: 服务器只需要维护一个连接,即可与多个客户端进行通信。
  • 高性能: WebSocket 协议采用了高效的压缩算法,可以有效减少数据传输量。

2. 原理

WebSocket 协议的握手过程如下:

  1. 客户端向服务器发送一个 HTTP 请求,该请求包含一个 Upgrade 头,值为 websocket
  2. 服务器响应客户端的请求,并返回一个 Upgrade 头,值为 websocket
  3. 客户端和服务器完成握手,建立 WebSocket 连接。
// 客户端代码
var ws = new WebSocket("ws://localhost:8080/");

ws.onopen = function() {
   
  console.log("WebSocket 连接成功");
};

ws.onmessage = function(event) {
   
  console.log("收到服务器消息:", event.data);
};

ws.onclose = function() {
   
  console.log("WebSocket 连接关闭");
};

// 服务器代码
var WebSocketServer = require("ws").Server;

var wss = new WebSocketServer({
   
  port: 8080
});

wss.on("connection", function(ws) {
   
  console.log("WebSocket 连接建立");

  ws.on("message", function(message) {
   
    console.log("收到客户端消息:", message);
    ws.send("服务器收到消息:" + message);
  });

  ws.on("close", function() {
   
    console.log("WebSocket 连接关闭");
  });
});

WebSocket 连接建立之后,客户端和服务器可以进行双向数据传输。 数据传输过程如下:

  1. 客户端或服务器向对方发送数据。
  2. 数据通过 WebSocket 连接传输到对方。
  3. 对方收到数据并进行处理。

WebSocket 协议支持以下两种数据帧类型:

  • 文本帧: 用于传输文本数据。
  • 二进制帧: 用于传输二进制数据。

3. 总结

WebSocket 协议是一种非常有用的实时通信协议,它可以有效地解决传统 HTTP 协议在实时通信场景下的缺陷。 随着实时通信应用的不断发展,WebSocket 协议将会得到越来越广泛的应用。

目录
相关文章
|
11天前
|
网络协议 JavaScript 前端开发
WebSocket:实现客户端与服务器实时通信的技术
WebSocket:实现客户端与服务器实时通信的技术
|
10月前
|
移动开发 JavaScript 网络协议
常用的Websocket技术一览
Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,当然也支持客户端发送数据到服务端。通常用来社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、资讯自动更新等场景,那么今天就简单聊一下在Java开发中对Websocket的技术选型。
|
移动开发 安全 小程序
即时通讯技术文集(第14期):WebSocket精华文章合集 [共15篇]
为了更好地分类阅读52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第14 期。
66 0
|
JSON 网络协议 测试技术
RPC接口测试技术-websocket 自动化测试实践
RPC接口测试技术-websocket 自动化测试实践
157 0
|
JSON 网络协议 测试技术
RPC接口测试技术-websocket 自动化测试实践
RPC接口测试技术-websocket 自动化测试实践
|
JavaScript
在Vue项目中使用WebSocket技术
在Vue项目中使用WebSocket技术
270 0
在Vue项目中使用WebSocket技术
|
前端开发 网络协议 JavaScript
JavaScript 服务器推送技术之 WebSocket
短轮询最简单,在一些简单的场景也会经常使用,就是隔一段时间就发起一个ajax请求。那么长轮询是什么呢? 长轮询(Long Polling)是在Ajax轮询基础上做的一些改进,在没有更新的时候不再返回空响应,而且把连接保持到有更新的时候,客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。它是一个解决方案,但不是最佳的技术方案。
JavaScript 服务器推送技术之 WebSocket
|
JSON 网络协议 架构师
RPC接口测试技术-websocket 自动化测试实践
WebSocket 是一种在单个 TCP 连接上进行全双工通信(Full Duplex 是通讯传输的一个术语。通信允许数据在两个方向上同时传输,它在能力上相当于两个单工通信方式的结合。全双工指可以同时(瞬时)进行信号的双向传输( A→B 且 B→A )。指 A→B 的同时 B→A,是瞬时同步的)的协议。 WebSocket 通信协议于 2011 年被 IETF 定为标准 RFC 6455,
|
NoSQL PHP Redis
Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
7909 0
|
Web App开发 前端开发 API