websocket 和 eventsource 的区别和应用

先从语法方面说，再从特性方面说，再说应用场景

EventSource 和 WebSocket 都是用于实现服务器和客户端之间的双向通信的技术，但它们有一些重要的区别：

1. 协议：

   • WebSocket 使用自定义的协议，它是一种全双工通信协议，允许服务器和客户端之间进行实时的双向通信。 ws 和 wss【全双工】
   • EventSource 使用 HTTP 或 HTTPS 协议，它是基于 HTTP 1.1 的一种简单的服务器推送技术，仅支持从服务器到客户端的单向通信。【半双工】

2. 连接类型：

   • WebSocket 使用【持久连接】，一旦建立连接，服务器和客户端之间的通信通道将保持打开状态，直到其中一方关闭连接。
   • EventSource 则是一种【单向通信机制】，客户端发送请求并保持连接打开，服务器可以随时向客户端发送数据，但客户端不能向服务器发送数据。
3. 实时性：
   • WebSocket 比 EventSource 更具实时性，因为它支持全双工通信，允许服务器和客户端之间实时地交换数据。一旦建立了 WebSocket 连接，服务器和客户端可以立即开始发送和接收数据，而且没有请求/响应的延迟。
   • EventSource 是单向通信，只能由服务器向客户端推送数据，客户端不能直接向服务器发送数据。虽然 EventSource 可以实现服务器向客户端的实时推送，但由于其单向性，客户端不能即时地响应服务器的数据，这可能会导致一定程度的延迟。

4. 浏览器支持：

   • WebSocket 在大多数现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari、Edge 等。
   • EventSource 也在现代浏览器中得到了良好的支持，但并不像 WebSocket 那样普及，而且某些旧版浏览器可能不支持。

5. 应用场景：

   • WebSocket 通常用于需要实时双向通信的应用程序，如在线游戏、聊天应用、股票市场数据等。，WebSocket 更适合用于实时双向通信的场景
   • EventSource 适用于需要服务器向客户端推送更新的场景，例如实时通知、实时更新的新闻、股票价格变动等。 EventSource 则适用于一些不需要即时响应的实时更新推送场景。

6. 协议开销：

   • 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 怎么处理弱网的情况

心跳检查+重链机制

1. 实现重连机制：重新 new WebSocket 创建连接

2. 实现心跳检查：在连接建立后，定期发送心跳消息，检查链接的活跃情况， onopen里面使用 setInterval，如果一段时间没有收到心跳消息，就认为是断开链接，触发重连机制

3. 降低带宽消耗：可以优化数据传输的方式，减少带宽消耗。例如，可以使用压缩算法对数据进行压缩，或者对数据进行分段传输，以减少单个消息的大小。

4. 提供离线功能：在应用程序中提供离线功能，即使在网络断开的情况下，用户仍然可以继续使用一些功能。例如，可以缓存一些数据或操作，并在网络恢复时将其同步到服务器端。

5. 优化前端界面：在前端界面中给出清晰的提示，告知用户当前网络状态，并提供相应的操作建议。例如，可以显示网络连接状态的图标或文字提示，以及重连按钮等

EventSource 处理弱网的情况

和 websocket 的处理办法类似

1. 实现重连机制：与 WebSocket 类似，你可以在客户端实现一个重连机制，以便在连接断开时自动尝试重新连接。在 EventSource 中，可以通过监听 onerror 事件来检测连接断开的情况，并在发生错误时尝试重新建立连接。
2. 增加超时处理：可以设置超时时间来检测连接是否处于不稳定状态。如果在一定时间内没有收到新的事件，可以认为连接已经断开，并触发重连机制。