WebSocket 的 API

简介: 【10月更文挑战第26天】通过使用 WebSocket API,开发者可以轻松地在浏览器中实现与服务器的实时双向通信,为各种实时性要求高的 Web 应用,如在线游戏、实时聊天、股票行情推送等提供了强大的技术支持,极大地提升了 Web 应用的交互性和用户体验。

WebSocket API 是 HTML5 中用于实现浏览器与服务器之间全双工通信的一套接口:

WebSocket 构造函数

  • var socket = new WebSocket('ws://example.com/socket');
  • 用于创建一个 WebSocket 实例,连接到指定的 WebSocket 服务器地址。其中 ws:// 是 WebSocket 的协议前缀,类似于 HTTP 的 http://。如果是加密的 WebSocket 连接,则使用 wss://

WebSocket 事件

open 事件

  • 当 WebSocket 连接成功建立时触发。
  • 示例:
    socket.addEventListener('open', function (event) {
         
    console.log('WebSocket connection established.');
    });
    

message 事件

  • 当服务器向客户端发送消息时触发,通过 event.data 获取服务器发送的数据。
  • 示例:
    socket.addEventListener('message', function (event) {
         
    console.log('Received message:', event.data);
    });
    

close 事件

  • 当 WebSocket 连接关闭时触发,可通过 event.codeevent.reason 获取关闭的状态码和原因。
  • 示例:
    socket.addEventListener('close', function (event) {
         
    console.log('WebSocket connection closed:', event.code, event.reason);
    });
    

error 事件

  • 当 WebSocket 连接发生错误时触发,可通过 event.error 获取错误对象。
  • 示例:
    socket.addEventListener('error', function (event) {
         
    console.log('WebSocket error:', event.error);
    });
    

WebSocket 方法

send()

  • 用于向服务器发送数据,数据可以是字符串、ArrayBuffer、Blob 等类型。
  • 示例:
    socket.send('Hello, Server!');
    var buffer = new ArrayBuffer(10);
    socket.send(buffer);
    

close()

  • 用于关闭 WebSocket 连接,可传入可选的状态码和关闭原因。
  • 示例:
    socket.close(1000, 'Normal closure');
    

WebSocket 属性

readyState

  • 表示 WebSocket 连接的当前状态,有以下几种取值:
    • WebSocket.CONNECTING (0):连接正在建立。
    • WebSocket.OPEN (1):连接已建立,可以进行通信。
    • WebSocket.CLOSING (2):连接正在关闭。
    • WebSocket.CLOSE (3):连接已关闭。
  • 示例:
    console.log('WebSocket state:', socket.readyState);
    

bufferedAmount

  • 表示已发送但尚未从网络中传输完成的数据量,以字节为单位。可用于控制发送数据的频率,避免发送过快导致网络拥塞。
  • 示例:
    if (socket.bufferedAmount === 0) {
         
    socket.send('Another message.');
    }
    

通过使用 WebSocket API,开发者可以轻松地在浏览器中实现与服务器的实时双向通信,为各种实时性要求高的 Web 应用,如在线游戏、实时聊天、股票行情推送等提供了强大的技术支持,极大地提升了 Web 应用的交互性和用户体验。

相关文章
|
7月前
|
开发框架 网络协议 JavaScript
uniapp链接WebSocket 常用的api
uniapp链接WebSocket 常用的api
139 0
|
1月前
|
API 开发者
WebSocket API 中的 onerror 事件和 close 事件有什么不同?
【10月更文挑战第26天】`onerror`事件侧重于通知开发者WebSocket连接过程中出现的错误,以便进行相应的错误处理和恢复;而`close`事件则主要用于在连接关闭时进行资源清理和根据关闭情况采取适当的后续操作。两者在WebSocket应用的开发中都起着重要的作用,帮助开发者更好地管理和处理WebSocket连接的各种情况。
|
1月前
|
安全 API UED
WebSocket API 中的 close 事件是如何触发的?
【10月更文挑战第26天】close事件的触发涵盖了从正常的连接关闭到各种异常情况导致的连接中断等多种场景。通过监听close事件,开发人员可以在连接关闭时进行相应的处理,如清理资源、更新界面状态或尝试重新连接等,以确保应用程序的稳定性和良好的用户体验。
|
7月前
|
网络协议 JavaScript 安全
第十一篇 前沿趋势与展望:深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3
第十一篇 前沿趋势与展望:深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3
114 1
|
6月前
|
移动开发 监控 API
WebSocket API 详解与应用指南
WebSocket API 是HTML5的一种技术,它允许服务器与客户端建立持久的全双工连接,改变传统HTTP请求-响应模式,实现双向通信。API包括WebSocket构造函数、连接状态属性(如readyState)、方法(如send和close)及事件(如onopen和onmessage)。它简化了实时Web应用程序的开发,适用于在线聊天、实时数据监控等场景。
190 5
|
7月前
|
JSON Java API
Java 编程问题:十三、HTTP 客户端和 WebSocket API
Java 编程问题:十三、HTTP 客户端和 WebSocket API
284 0
|
7月前
|
开发框架 网络协议 JavaScript
uniapp链接WebSocket 常用的API
uniapp链接WebSocket 常用的API
|
API Python Windows
ChartGPT API是一个基于Websocket的API
ChartGPT API是一个基于Websocket的API
222 1
|
JSON 安全 JavaScript
「Web应用架构」WebSocket介绍和WebSocket API
「Web应用架构」WebSocket介绍和WebSocket API