当前位置: 首页 > news >正文

websocket初识

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

一,WebSocket 的特点

  1. 建立连接后全双工通信
    • WebSocket 连接建立后,客户端和服务器可以同时发送数据,实现双向通信。
  2. 轻量级的通信协议
    • WebSocket 协议的数据包头非常小,相比于 HTTP 请求,它可以更高效地传输数据。
  3. 持久性连接
    • 与 HTTP 的无状态请求不同,WebSocket 连接是持久的,只要双方都不关闭连接,就可以一直保持通信状态。
  4. 减少延迟
    • 由于 WebSocket 是基于 TCP 的持久连接,因此它减少了每次数据传输时的握手延迟。
  5. 支持文本和二进制数据
    • WebSocket 支持发送纯文本和二进制数据,适用于多种应用场景。

二,WebSocket 的工作原理

  1. 握手
    • 客户端通过 HTTP 协议发起一个特殊的请求,请求建立 WebSocket 连接。
    • 服务器收到请求后,通过 HTTP 响应来接受或拒绝这个请求。
    • 如果服务器接受请求,则客户端和服务器之间建立了 WebSocket 连接。
  2. 数据传输
    • 一旦连接建立,客户端和服务器就可以开始发送数据帧。
    • 数据帧可以是文本或二进制格式。
    • WebSocket 协议定义了一种帧格式来封装数据,包括控制帧和应用数据帧。
  3. 关闭连接
    • 当不再需要通信时,客户端或服务器可以通过发送一个特殊的关闭帧来关闭连接。
    • 关闭帧包含一个状态代码和可选的关闭原因。

三,WebSocket 的使用场景

  1. 实时聊天应用
    • 实时聊天应用需要客户端和服务端之间持续的双向通信,WebSocket 非常适合这种场景。
  2. 在线游戏
    • 在线游戏需要低延迟的数据传输,WebSocket 可以提供这种性能。
  3. 实时数据分析
    • 对于需要实时更新数据的应用程序,如股票报价、传感器数据等,WebSocket 可以实现实时数据流。
  4. 协作编辑工具
    • 多人协作编辑文档时,需要实时同步编辑内容,WebSocket 可以提供高效的解决方案。

四,WebSocket 的实现

要实现 WebSocket,既可以在服务器端进行 WebSocket 支持的配置,也可以在客户端使用 WebSocket API 进行连接和通信。下面是如何在客户端和服务器端分别实现 WebSocket 的步骤。

1. 客户端实现

在浏览器中,WebSocket API 提供了非常简单的方法来与服务器建立 WebSocket 连接,并进行数据传输。使用 WebSocket API 的基本流程如下:

  • 创建 WebSocket 连接: 使用 new WebSocket(url) 创建一个 WebSocket 实例,并传入要连接的 WebSocket 服务器的 URL。

    const socket = new WebSocket('ws://example.com/socket');
    
  • 连接事件处理: 监听 WebSocket 的 onopen 事件,当连接成功建立时,会调用该回调函数。你可以在这个事件中发送初始的消息。

    socket.onopen = function(event) {console.log('WebSocket is open now.');socket.send('Hello Server!');
    };
    
  • 接收消息: 使用 onmessage 事件来接收服务器发送的消息,服务器可以发送文本或二进制数据。

    socket.onmessage = function(event) {console.log('Message from server ', event.data);
    };
    
  • 错误处理: 如果连接过程中发生错误,可以使用 onerror 事件处理。

    socket.onerror = function(error) {console.log('WebSocket Error: ', error);
    };
    
  • 关闭连接: 使用 onclose 事件来处理 WebSocket 连接的关闭。客户端或服务器都可以关闭连接。

    socket.onclose = function(event) {console.log('WebSocket is closed now.');
    };
    
  • 手动关闭 WebSocket 连接: 在需要时,客户端可以调用 socket.close() 手动关闭连接。

    socket.close();
    
2. 服务器端实现

在服务器端,WebSocket 的实现可以使用多种语言和框架。以下是常见的 WebSocket 服务器实现方式之一——基于 Java 的实现。

使用 Java 的 WebSocket 实现(基于 javax.websocket

Java 提供了对 WebSocket 的原生支持,开发者可以使用 javax.websocket API 进行服务器端的 WebSocket 实现。

  • 导入依赖: 首先需要在项目中添加对 WebSocket 的依赖。例如,在 Maven 中可以这样添加依赖:

    <dependency><groupId>javax.websocket</groupId><artifactId>javax.websocket-api</artifactId><version>1.1</version>
    </dependency>
    
  • 创建 WebSocket 服务器端点: 使用 @ServerEndpoint 注解创建一个 WebSocket 端点,定义与客户端通信的方法。

    import javax.websocket.OnClose;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;@ServerEndpoint("/socket")
    public class WebSocketServer {@OnOpenpublic void onOpen(Session session) {System.out.println("New connection opened: " + session.getId());}@OnMessagepublic void onMessage(String message, Session session) {System.out.println("Message received: " + message);try {// Echo the message back to the clientsession.getBasicRemote().sendText("Echo: " + message);} catch (Exception e) {e.printStackTrace();}}@OnClosepublic void onClose(Session session) {System.out.println("Connection closed: " + session.getId());}
    }
    

    在这个例子中,@OnOpen@OnMessage@OnClose 注解分别处理 WebSocket 连接的打开、消息接收和连接关闭事件。

  • 部署 WebSocket 服务器: 将 WebSocket 端点类部署到支持 Java EE 的服务器(如 Tomcat、Jetty)。当客户端连接到 ws://localhost:8080/your-app/socket 时,服务器将处理 WebSocket 消息。

3. 其他服务器端实现(Node.js 示例)

除了 Java,Node.js 也是实现 WebSocket 服务器的常用语言之一。下面是使用 ws 库在 Node.js 中实现 WebSocket 的例子:

  • 安装 WebSocket 库

    npm install ws
    
  • 编写 WebSocket 服务器

    const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('received: %s', message);ws.send(`Echo: ${message}`);});ws.send('Welcome to the WebSocket server!');
    });console.log('WebSocket server is running on ws://localhost:8080');
    

    运行这个脚本后,服务器就可以监听来自客户端的 WebSocket 连接并处理消息。

五,WebSocket 和 HTTP 的区别

  1. 通信模型
    • HTTP 是请求-响应模型,客户端主动发起请求,服务器被动响应。而 WebSocket 是全双工通信,客户端和服务器可以随时主动发送数据。
  2. 连接持久性
    • HTTP 是无状态协议,通常每次请求都会建立和关闭连接。而 WebSocket 一旦握手成功,连接就会保持,直到客户端或服务器主动关闭。
  3. 协议头的开销
    • HTTP 每次请求都要带上大量的头部信息,而 WebSocket 在握手之后,数据包的头部很小,通信更加高效。
  4. 数据传输模式
    • HTTP 主要传输文本数据,而 WebSocket 除了支持文本,还可以传输二进制数据,适合多种数据传输场景。

六,WebSocket 的优点和缺点

优点:
  1. 双向通信:允许客户端和服务器同时发送和接收数据,实现了实时、双向的通信。
  2. 高效性:相比于 HTTP 协议,WebSocket 的数据包头部很小,减少了带宽消耗。
  3. 低延迟:由于是持久性连接,不需要频繁建立和关闭连接,因此延迟较低,适合需要实时互动的应用。
  4. 支持二进制数据:WebSocket 支持传输二进制数据,非常适合音频、视频和文件等场景。
缺点:
  1. 服务器压力大:由于连接是长时间保持的,服务器需要维护每一个客户端的连接,导致服务器资源消耗较大。
  2. 防火墙问题:某些防火墙可能会阻止 WebSocket 连接,因为它使用的是非标准 HTTP 协议。
  3. 兼容性问题:虽然大多数现代浏览器都支持 WebSocket,但在较旧的浏览器或网络环境中可能需要使用备用方案(如轮询)来模拟双向通信。

七,总结

WebSocket 是一种强大的通信协议,它通过减少通信的开销和延迟,实现了客户端和服务器的实时双向通信。对于需要高效实时数据传输的应用场景,如聊天、游戏、股票行情、协同办公等,WebSocket 是非常适合的选择。

相关文章:

  • 华为云LTS日志上报至观测云最佳实践
  • EXEAL无法使用宏处理办法
  • chatgpt的ai导师风格设置
  • uniapp修改uni-ui组件样式(对微信小程序/H5有效,vue3)
  • iOS 提取图片的主题色,并支持灵活提取
  • WingetUI:可视化Windows常用的命令行包管理工具
  • php中打印函数
  • 文件的管理
  • 资质申请中常见的错误有哪些?
  • Python酷库之旅-第三方库Pandas(130)
  • net core mvc 数据绑定 《1》
  • 基于php摄影门户网站
  • Springboot+PostgreSQL+MybatisPlus存储JSON或List、数组(Array)数据
  • 机器学习(2):机器学习的相关术语
  • .Net 6.0 监听Windows网络状态切换
  • 2017-09-12 前端日报
  • 4个实用的微服务测试策略
  • Android系统模拟器绘制实现概述
  • es6
  • flask接收请求并推入栈
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • LeetCode算法系列_0891_子序列宽度之和
  • Node项目之评分系统(二)- 数据库设计
  • PHP的类修饰符与访问修饰符
  • React-Native - 收藏集 - 掘金
  • web标准化(下)
  • XForms - 更强大的Form
  • 阿里云应用高可用服务公测发布
  • 反思总结然后整装待发
  • 给Prometheus造假数据的方法
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 近期前端发展计划
  • 类orAPI - 收藏集 - 掘金
  • 区块链共识机制优缺点对比都是什么
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 一道闭包题引发的思考
  • 用Visual Studio开发以太坊智能合约
  • 再谈express与koa的对比
  • 自定义函数
  • FaaS 的简单实践
  • ​iOS实时查看App运行日志
  • ​油烟净化器电源安全,保障健康餐饮生活
  • #define、const、typedef的差别
  • #if 1...#endif
  • (2024最新)CentOS 7上在线安装MySQL 5.7|喂饭级教程
  • (八十八)VFL语言初步 - 实现布局
  • (第61天)多租户架构(CDB/PDB)
  • (二十一)devops持续集成开发——使用jenkins的Docker Pipeline插件完成docker项目的pipeline流水线发布
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)甲方乙方——赵民谈找工作
  • .ai域名是什么后缀?
  • .NET Remoting学习笔记(三)信道