先从语法方面说,再从特性方面说,再说应用场景
EventSource 和 WebSocket 都是用于实现服务器和客户端之间的双向通信的技术,但它们有一些重要的区别:
-
协议:
- WebSocket 使用自定义的协议,它是一种全双工通信协议,允许服务器和客户端之间进行实时的双向通信。 ws 和 wss【全双工】
- EventSource 使用 HTTP 或 HTTPS 协议,它是基于 HTTP 1.1 的一种简单的服务器推送技术,仅支持从服务器到客户端的单向通信。【半双工】
-
连接类型:
- WebSocket 使用【持久连接】,一旦建立连接,服务器和客户端之间的通信通道将保持打开状态,直到其中一方关闭连接。
- EventSource 则是一种【单向通信机制】,客户端发送请求并保持连接打开,服务器可以随时向客户端发送数据,但客户端不能向服务器发送数据。
- 实时性:
- WebSocket 比 EventSource 更具实时性,因为它支持全双工通信,允许服务器和客户端之间实时地交换数据。一旦建立了 WebSocket 连接,服务器和客户端可以立即开始发送和接收数据,而且没有请求/响应的延迟。
- EventSource 是单向通信,只能由服务器向客户端推送数据,客户端不能直接向服务器发送数据。虽然 EventSource 可以实现服务器向客户端的实时推送,但由于其单向性,客户端不能即时地响应服务器的数据,这可能会导致一定程度的延迟。
-
浏览器支持:
- WebSocket 在大多数现代浏览器中得到广泛支持,包括 Chrome、Firefox、Safari、Edge 等。
- EventSource 也在现代浏览器中得到了良好的支持,但并不像 WebSocket 那样普及,而且某些旧版浏览器可能不支持。
-
应用场景:
- WebSocket 通常用于需要实时双向通信的应用程序,如在线游戏、聊天应用、股票市场数据等。,WebSocket 更适合用于实时双向通信的场景
- EventSource 适用于需要服务器向客户端推送更新的场景,例如实时通知、实时更新的新闻、股票价格变动等。 EventSource 则适用于一些不需要即时响应的实时更新推送场景。
-
协议开销:
- WebSocket 的协议头相对较小,因为它是专门为实时通信设计的。
- EventSource 使用 HTTP 协议,因此会有一些额外的 HTTP 头部信息,可能会增加一些开销。
面试题目
websocket 怎么使用,怎么接收消息
socket = new WebSocket("ws://example.com/socketserver");
socket.onopen = function(event) {
console.log("WebSocket连接已建立");
socket.send('你好')
};
socket.onmessage = function(event) {
console.log("接收到消息: " + event.data);
};
socket.onclose = function(event) {
console.log("WebSocket连接已关闭");
};
socket.onerror = function(error) {
console.error("WebSocket错误: " + error.message);
};
webscoket 怎么处理弱网的情况
心跳检查+重链机制
-
实现重连机制:重新 new WebSocket 创建连接
-
实现心跳检查:在连接建立后,定期发送心跳消息,检查链接的活跃情况, onopen里面使用 setInterval,如果一段时间没有收到心跳消息,就认为是断开链接,触发重连机制
-
降低带宽消耗:可以优化数据传输的方式,减少带宽消耗。例如,可以使用压缩算法对数据进行压缩,或者对数据进行分段传输,以减少单个消息的大小。
-
提供离线功能:在应用程序中提供离线功能,即使在网络断开的情况下,用户仍然可以继续使用一些功能。例如,可以缓存一些数据或操作,并在网络恢复时将其同步到服务器端。
-
优化前端界面:在前端界面中给出清晰的提示,告知用户当前网络状态,并提供相应的操作建议。例如,可以显示网络连接状态的图标或文字提示,以及重连按钮等
EventSource 处理弱网的情况
和 websocket 的处理办法类似
- 实现重连机制:与 WebSocket 类似,你可以在客户端实现一个重连机制,以便在连接断开时自动尝试重新连接。在 EventSource 中,可以通过监听
onerror
事件来检测连接断开的情况,并在发生错误时尝试重新建立连接。 - 增加超时处理:可以设置超时时间来检测连接是否处于不稳定状态。如果在一定时间内没有收到新的事件,可以认为连接已经断开,并触发重连机制。