你好，我是沐爸，欢迎点赞、收藏和关注。个人知乎
在JavaScript中，使用WebSocket非常简单直观。通过几行代码，你就可以轻松创建一个WebSocket连接，并监听来自服务器的消息。无论是开发实时聊天应用、在线游戏、实时数据分析平台，还是任何需要实时数据交互的场景，WebSocket都能为你提供强大的技术支持。
一、WebSocket是什么？
WebSocket是一种在Web浏览器和服务器之间建立全双工通信的协议。它允许网页实时地发送和接收数据，而不需要页面刷新或像传统HTTP协议那样的轮询操作。
二、WebSocket的特点
- 实时性：WebSocket允许服务器主动向客户端推送数据，实现实时通信。
- 双向通信：WebSocket支持同时发送和接收数据，实现双向通信。
- 低延迟：由于建立了持久连接，并且数据传输没有额外的HTTP头部信息负担，因此WebSocket能够更快地传输小量数据。
- 节省带宽：WebSocket只需要一个TCP握手就能创建一个到服务器的链接，并且这个链接可以被复用以节省带宽。
- 跨域通信：WebSocket协议支持跨域通信，因此可以在任何Web域之间建立实时连接。
- 强大的可靠性：WebSocket提供了自动重连机制和数据压缩功能，增强了通信的可靠性。
三、WebSocket的基本使用步骤
在JavaScript中使用WebSocket，通常遵循以下步骤：
- 创建WebSocket对象：
使用new WebSocket(url)构造函数创建WebSocket对象，并传入要连接的WebSocket服务器的URL。例如：
const socket = new WebSocket('ws://localhost:8080');
- 监听事件：
WebSocket对象提供了一些事件，用于处理连接、消息、关闭和错误等情况。常用的事件有：onopen：连接建立时触发。onmessage：收到服务器消息时触发。onclose：连接关闭时触发。onerror：发生错误时触发。
示例：
socket.onopen = function(event) {
console.log('WebSocket连接已建立');
};
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};
socket.onclose = function(event) {
console.log('WebSocket连接已关闭');
};
socket.onerror = function(error) {
console.error('WebSocket Error:', error);
};
- 与服务器通信：
一旦连接建立，就可以使用WebSocket对象提供的send()方法向服务器发送数据。例如：
socket.send('Hello, server!');
- 关闭连接：
如果需要关闭WebSocket连接，可以调用socket.close()方法。
四、WebSocket的优缺点
优点：
- 实时性强，适合需要实时数据交互的应用场景。
- 双向通信，可以同时发送和接收数据。
- 节省带宽和服务器资源，因为不需要频繁地进行HTTP请求。
- 跨域通信方便，简化了跨域数据交换的复杂度。
缺点：
- 兼容性问题，一些老版本的浏览器可能不支持WebSocket。
- 缺乏完善的安全策略，需要开发者自行处理加密和验证等安全问题。
- 对网络环境要求较高，网络波动可能导致连接断开。
- 服务器压力相对较高，因为需要保持长连接。
五、WebSocket的应用场景
WebSocket适用于实时性要求高的应用场景，如社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、实时交易、体育实况更新、视频会议/聊天、实时通知等。通过WebSocket，可以实现服务器与客户端之间的实时数据交换，提升用户体验。
六、WebSocket和HTTP的区别？
主要区别如下：
- 通信方式：WebSocket 可以进行双向数据传输，客户端和服务器可以相互发消息。而 HTTP 是单向的，HTTP 的通信只能由客户端发起，服务端响应。
- 连接特性：WebSocket在建立连接后，会保持这个连接直到被明确关闭。HTTP通常使用短连接，即每次请求-响应完成后，连接就会被关闭。
- 应用场景：WebSocket广泛应用于需要实时数据交换的场景，如在线聊天、实时游戏等；HTTP主要用于Web页面的访问和数据传输，如网页浏览、文件下载、API接口调用等。
七、WebSocket的协议标识符？
如果服务器网址是HTTP，那么WebSocket 对应的是ws。
如果服务器网址是HTTPS加密的，那么WebSocket 对应的是wss。
八、如何搭建一个本地WebSocket服务？
希望对你有所帮助，下期再见！
标签：HTTP,socket,实时,JS,WebSocket,聊聊,服务器,连接 From： https://blog.csdn.net/m0_37943716/article/details/141271198