webSocket的使用文档
- 1.webSocket介绍
- 2.webSocket使用
1.webSocket介绍
WebSocket是在单个TCP连接上提供全双工通信的协议。它允许双方同时进行数据传输,而不需要等待对方的响应,简单说就是他是服务器和客户端相互主动传输信息的约定协议。
优点:
- 双向通信:WebSocket 允许客户端和服务器之间进行双向通信,客户端可以主动向服务器发送消息,而不需要等待服务器的请求
- 低延迟:WebSocket 连接在建立后保持打开状态,减少了每次请求和响应所需的开销,从而降低了延迟。
- 持久连接:WebSocket 连接是持久的,允许长时间保持连接而无需重新建立。
- 跨域支持:WebSocket 协议支持跨域通信,可以与不同源的服务器进行交互。
总之,WebSocket 提供了一种高效、灵活的方式来实现实时数据传输,特别适合需要快速和频繁更新数据的应用程序。
2.webSocket使用
webSocker官网介绍
状态:
常量 | 值 | 作用 |
---|---|---|
WebSocket.CONNECTING | 0 | 连接正在建立阶段 |
WebSocket.OPEN | 1 | 连接已经建立可以通信 |
WebSocket.CLOSING | 2 | 连接正在关闭 |
WebSocket.CLOSED | 3 | 连接已经关闭或者未建立连接 |
代码事例:
javascript
// 初始化 WebSocket 实例,连接到指定的 WebSocket 服务器 (后端地址10.10.10.100:8080)
const webSocket = new WebSocket('ws://10.10.10.100:8080/webSocket');
// 检查WebSocket连接状态
if (webSocket.readyState === WebSocket.CONNECTING) {
console.log("连接正在建立...");
} else if (webSocket.readyState === WebSocket.OPEN) {
console.log("连接已建立!");
} else if (webSocket.readyState === WebSocket.CLOSING) {
console.log("连接正在关闭...");
} else if (webSocket.readyState === WebSocket.CLOSED) {
console.log("连接已关闭!");
}
常用属性:
属性 | 描述 |
---|---|
WebSocket.onmessage | 接收到信息时的回调函数 |
WebSocket.onopen | 连接成功后的回调函数 |
WebSocket.onerror | 连接失败是要执行的回调函数 |
WebSocket.onclose | 设置连接关闭时要执行的回调函数 |
代码事例:
// 创建 WebSocket 实例,连接到指定的 WebSocket 服务器
const WebSocket = new WebSocket('ws://10.10.10.100:8080/webSocket')
// 连接成功时的回调函数
webSocket.onopen = (event)=>{
console.log('连接已建立!');
// 在这里可以执行连接成功后的操作,例如发送数据
webSocket.send('Hello, WebSocket Server!');
};
// 接收到消息时的回调函数
webSocket.onmessage = (event)=>{
// 在这里可以处理接收到的消息
console.log('接收到消息:', event.data);
};
// 连接关闭时的回调函数
webSocket.onclose = (event)=> {
// 在这里可以执行连接关闭后的操作
console.log('连接已关闭!');
};
// 连接发生错误时的回调函数
webSocket.onerror = (error)=> {
//在这里可执行连接失败可重连
console.error('连接发生错误:', error);
};