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 协议将会得到越来越广泛的应用。

目录
相关文章
|
10天前
|
NoSQL Redis Python
技术经验分享:Django实现websocket
技术经验分享:Django实现websocket
|
2月前
|
网络协议 JavaScript 前端开发
WebSocket:实现客户端与服务器实时通信的技术
WebSocket:实现客户端与服务器实时通信的技术
|
2天前
|
监控 网络协议 Java
Java中的WebSocket实时通信技术详解
Java中的WebSocket实时通信技术详解
|
27天前
|
监控 网络协议 JavaScript
WebSocket技术详解与应用指南
WebSocket是全双工TCP协议,解决HTTP的单向通信问题,允许服务器主动推送信息。本文档介绍了WebSocket的基本概念、工作原理(基于HTTP握手,通过帧进行数据通信)、应用场景(实时聊天、在线游戏、数据监控等)和实现方法(客户端使用JavaScript API,服务器端有多种编程语言库支持)。学习WebSocket能提升Web应用的实时性和交互性。
38 1
|
10天前
|
移动开发 安全 前端开发
技术心得记录:基于webSocket的聊天室
技术心得记录:基于webSocket的聊天室
|
2月前
|
存储 监控 BI
HIS系统是什么?一套前后端分离云HIS系统源码 接口技术RESTful API + WebSocket + WebService
医院管理信息系统(全称为Hospital Information System)即HIS系统。 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、物资管理、媒体管理等,为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线,通过对信息的收集、存储、传递、统计、分析、综合查询、报表输出和信息共享,及时为医院领导及各部门管理人员提供全面、准确的各种数据。 门诊医生工作站采用下拉式汉化菜单,界面友好,实用性强,设有与门诊挂号收费系统、医技科室信息系统、住院结算信息系统的软件接口。
59 1
|
12月前
|
移动开发 JavaScript 网络协议
常用的Websocket技术一览
Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,当然也支持客户端发送数据到服务端。通常用来社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、资讯自动更新等场景,那么今天就简单聊一下在Java开发中对Websocket的技术选型。
|
Web App开发 编解码 安全
零基础快速入门WebRTC:基本概念、关键技术、与WebSocket的区别等
本文主要分享了WebRTC的基本概念、关键技术术语(包括NAT、STUN、TURN、ICE、SDP 和信令),着重讲解了WebRTC是如何实现P2P通信以及WebRTC信令的作用,同时讨论了WebRTC在技术上的优势和劣势,最后还提供了一个简单的WebRTC Demo代码。
505 0
零基础快速入门WebRTC:基本概念、关键技术、与WebSocket的区别等
|
移动开发 安全 小程序
即时通讯技术文集(第14期):WebSocket精华文章合集 [共15篇]
为了更好地分类阅读52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第14 期。
68 0
|
JSON 网络协议 测试技术
RPC接口测试技术-websocket 自动化测试实践
RPC接口测试技术-websocket 自动化测试实践
161 0