开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 建站学院 > 前端开发 >  JS前端中的WebSocket如何使用

JS前端中的WebSocket如何使用

前端开发   发布日期：2023年07月24日   浏览次数：561次

这篇文章主要介绍“JS前端中的WebSocket如何使用”，在日常操作中，相信很多人在JS前端中的WebSocket如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JS前端中的WebSocket如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

先来一个常用例子

  1. // WebSocket构造函数，创建WebSocket对象
  2. let ws = new WebSocket('ws://localhost:8888')
  4. // 连接成功后的回调函数
  5. ws.onopen = function (params) {
  6.   console.log('客户端连接成功')
  7.   // 向服务器发送消息
  8.   ws.send('hello')
  9. };
  11. // 从服务器接受到信息时的回调函数
  12. ws.onmessage = function (e) {
  13.   console.log('收到服务器响应', e.data)
  14. };
  16. // 连接关闭后的回调函数
  17. ws.onclose = function(evt) {
  18.   console.log("关闭客户端连接");
  19. };
  21. // 连接失败后的回调函数
  22. ws.onerror = function (evt) {
  23.   console.log("连接失败了");
  24. };

下面详细说明常用的属性和方法

更全面的官网的文档可以去这里看：点击查看

下面是我总结的内容

WebSocket

  1. WebSocket
对象提供了用于创建和管理 
  1. WebSocket
连接，以及可以通过该连接发送和接收数据的 API。
  1. var ws= new WebSocket(url, protocols);

参数

  1. url
：要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。
  1. protocols（可选）
：一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（可以通过一台服务器根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。

属性

1. 

  1. readyState
属性返回实例对象的当前状态

  1. CONNECTING
：值为0，表示正在连接。
  1. OPEN
：值为1，表示连接成功，可以通信。
  1. CLOSING
：值为2，表示连接正在关闭。
  1. CLOSED
：值为3，表示连接已经关闭，或者打开连接失败。

示例

  1. switch (ws.readyState) {
  2.   case WebSocket.CONNECTING:	// 也可以用0
  3.     // do something
  4.     break;
  5.   case WebSocket.OPEN:			// 也可以用1
  6.     // do something
  7.     break;
  8.   case WebSocket.CLOSING:		// 也可以用2
  9.     // do something
  10.     break;
  11.   case WebSocket.CLOSED:		// 也可以用3
  12.     // do something
  13.     break;
  14.   default:
  15.     // this never happens
  16.     break;
  17. }

2. 

  1. onopen
连接成功后的回调函数

当

  1. WebSocket
的连接状态
  1. readyState
变为
  1. 1
时调用，这意味着当前连接已经准备好发送和接受数据。

使用方法

  1. ws.onopen = function () {
  2.   ws.send('Hello Server!');
  3. }

或者

  1. ws.addEventListener('open', function (event) {
  2.   ws.send('Hello Server!');
  3. });

3. 

  1. onmessage
从服务器接受到信息时的回调函数

  1. message
事件会在 
  1. WebSocket
接收到新消息时被触发

使用方法

  1. ws.onmessage = function(event) {
  2.   // 接收到的数据
  3.   var data = event.data;
  4.   // 其他代码
  5. };

或者

  1. ws.addEventListener("message", function(event) {
  2.   // 接收到的数据
  3.   var data = event.data;
  4.   // 其他代码
  5. });

注意：服务器推送的数据可能有多种格式，需要我们动态判断，也可以通过 

  1. binaryType
属性设置

判断 / 设置 数据格式

  1. // 判断
  2. ws.onmessage = function(event){
  3.   if(typeof event.data === String) {
  4.     console.log("返回数据是字符串");
  5.   }
  6. }
  8. // binaryType 属性设置
  9. ws.binaryType = "arraybuffer";
  10. ws.onmessage = function(e) {
  11.   // 收到的是 ArrayBuffer 数据
  12.   console.log(e.data.byteLength);
  13. };

4. 

  1. onclose
连接关闭后的回调函数

  1. onclose
在 
  1. WebSocket
连接的
  1. readyState
变为 
  1. CLOSED
或
  1. 3
时被调用，它接收一个名字为
  1. close
的 
  1. CloseEvent
事件

使用方法

  1. ws.onclose = function(event) {
  2.   var code = event.code;			// 表示服务端发送的关闭码
  3.   var reason = event.reason;		// 表示服务器关闭连接的原因
  4.   var wasClean = event.wasClean;	// 表示连接是否完全关闭
  5.   // 其他代码
  6. };

或者

  1. ws.addEventListener("close", function(event) {
  2.   var code = event.code;			// 表示服务端发送的关闭码
  3.   var reason = event.reason;		// 表示服务器关闭连接的原因
  4.   var wasClean = event.wasClean;	// 表示连接是否完全关闭
  5.   // 其他代码
  6. });

关闭码对照表：点击查看

5. 

  1. onerror
连接失败后的回调函数

当

  1. websocket
的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个
  1. error
事件将被引发。

使用方法

  1. ws.onerror = function(event) {
  2.   console.log('连接错误: ', event);
  3. };

或者

  1. ws.addEventListener('error', function (event) {
  2.   console.log('连接错误: ', event);
  3. });

6. 

  1. bufferedAmount
未发送至服务器的字节数

  1. bufferedAmount
是一个只读属性，用于返回已经被
  1. send()
方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为 
  1. 0
。但是，若在发送过程中连接被关闭，则属性值不会重置为 
  1. 0
。如果你不断地调用
  1. send()
，则该属性值会持续增长。

使用方法

  1. // 创建数据
  2. var data = new ArrayBuffer(10000000);
  3. // 发送数据
  4. ws.send(data);
  6. // 判断数据是否
  7. if (socket.bufferedAmount === 0) {
  8.   // 数据发送完成
  9. } else {
  10.   // 还有数据未发送完成
  11. }

方法

1. 

  1. send()
对要传输的数据进行排队

  1. send()
方法将需要通过 
  1. WebSocket
链接传输至服务器的数据排入队列，并根据所需要传输的 
  1. data bytes
的大小来增加 
  1. bufferedAmount
的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。

使用方法

  1. ws.send('your message');

注意：用于传输至服务器的数据。它必须是以下类型之一：

  1. USVString
：文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
  1. ArrayBuffer
：您可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedAmount 将加上所需字节数的值。
  1. Blob
：Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
  1. ArrayBufferView
：您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。

2. 

  1. close()
关闭当前链接

  1. close()
方法关闭 
  1. WebSocket
连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。

使用方法

  1. // WebSocket.close(code, reason)
  2. ws.close();

参数：

  1. code（可选）
：一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。
  1. reason（可选）
：一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。

以上就是JS前端中的WebSocket如何使用的详细内容，更多关于JS前端中的WebSocket如何使用的资料请关注九品源码其它相关文章！

相关热词： 前端中的WebSocket使用
上一篇：微信小程序 confirm（删除提示）
下一篇：Three.js中如何实现Bloom效果

文章分类

IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

最后更新

热门排行

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1