WebSocket简单介绍（属性+方法）

最新推荐文章于 2025-05-06 21:21:30 发布

琪十三

最新推荐文章于 2025-05-06 21:21:30 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： webSocket 文章标签： websocket

本文链接：https://blog.csdn.net/seventeenliu/article/details/110560962

webSocket 专栏收录该内容

1 篇文章

订阅专栏

WebSocket是一种全双工通信协议，常用于服务器主动向客户端推送数据的场景。它建立在TCP之上，与HTTP协议兼容，具有低延迟、高效的特点，并突破了同源限制。WebSocket的构造函数为WebSocket(url[, protocols])，主要属性包括binaryType、bufferedAmount、extensions、onclose、onerror、onmessage、onopen、protocol和readyState。关键方法有close([code[, reason]])用于关闭连接，send(data)用于发送数据。" 84959563,7328983,Eclipse中配置JSF框架详细步骤,"['Eclipse配置JSF', 'JSF']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebSocket简单介绍（属性+方法）

WebSocket 是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，允许服务端主动向客户端推送数据，在WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

我们都知道Ajax 轮询可以在特定的时间间隔，比如1 秒，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这背后就涉及到，需要不断地向服务器发送请求，而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。而在WebSocket协议种，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
在这里插入图片描述

WebSocket特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易；
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器；
（3）数据格式比较轻量，性能开销小，通信高效；
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信；
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

WebSocket 常量
在这里插入图片描述
** 构造函数WebSocket(url[,protocols])**

var ws = new WebSocket('ws://localhost:8080');//WebSocket的构造函数，用于新建WebSocket实例
//执行完此语句，客户端与服务器进行连接

WebSocket 属性

WebSocket.binaryType 使用二进制的数据类型连接
可以使用binaryType属性，显式指定收到的二进制数据类型

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
  console.log(e.data.size);
};

// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
  console.log(e.data.byteLength);
};

WebSocket.bufferedAmount(只读) 未发送至服务器的字节数

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}

WebSocket.extensions(只读) 服务器选择的扩展

WebSocket.onclose 用于指定连接关闭后的回调函数

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

WebSocket.onerror 用于指定连接失败后的回调函数

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

WebSocket.onmessage 用于指定当从服务器接受到信息时的回调函数

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};
ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
})

WebSocket.onopen 用于指定连接成功后的回调函数

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

WebSocket.protocol(只读) 服务器选择的下属协议

WebSocket.readyState(只读) 当前的链接状态

readyState属性返回实例对象的当前状态,有4种；
 CONNECTING：值为0，表示正在连接。
 OPEN：值为1，表示连接成功，可以通信了。
 CLOSING：值为2，表示连接正在关闭。
 CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
     break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

WebSocket.url(只读) WebSocket 的绝对路径

WebSocket 方法

WebSocket.close([code[, reason]]) 关闭当前链接

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

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

ws.send('your message');
//发送文本

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);
//发送Blob

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);
//发送ArrayBuffer对象