💥Eventsource vs Websocket vs Socket.io：谁才是实时通信王者？🔥(文末附ChatGPT福利)

avatar

JS实时通信eventsource, Eventsource、websocket与socket.io

在现代Web开发中，实时通信是一个非常重要的话题。当我们需要实现即时聊天、实时数据展示或实时游戏等功能时，选择合适的实时通信解决方案就显得格外重要。本文将介绍JS中三种常见的实时通信技术：eventsource、websocket和socket.io，并分析它们的特点和适用场景。

eventsource

一、eventsource是HTML5中新增的API，它提供了一种简单易用的方式来实现服务器向浏览器的即时推送。通过eventsource，我们可以建立一个持久连接，从而实现服务器端的事件推送到浏览器端。这使得我们能够轻松创建一个实时聊天室或实时数据展示页面。

eventsource具有超高效、最好用的特点。它使用简单，只需要通过JavaScript代码创建一个eventsource对象，并指定服务器端的URL。然后，我们可以监听事件，处理服务器端发送的消息。最重要的是，eventsource基于HTTP协议，所以可以兼容大部分浏览器。

优点：

  • 简单易用，与 HTTP 协议兼容。
  • 只需要一个长连接，服务器可以推送任意数量的事件。
  • 适用于服务端向客户端发送频率较低的数据。
  • 可以自动重连，并且在连接断开时会触发 error 和 close 事件，方便处理异常情况。

缺点：

  • 不支持双向通信。
  • 不支持二进制数据传输。
  • 兼容性存在问题，不支持 IE 浏览器。

image.png 示例：

const eventSource = new EventSource('/api/data');

eventSource.addEventListener('message', (event) => {
  console.log('Received message data:', event.data);
});

eventSource.addEventListener('error', (event) => {
  if (event.eventPhase === EventSource.CLOSED) {
    console.log('Connection was closed.');
  } else {
    console.error('An error occurred:', event);
  }
});

eventsource在实际项目中有许多应用场景。下面我列举几个常见的场景：

  1. 实时数据展示：eventsource可以用于实时展示服务器端的数据变化。比如，一个监控系统可以通过eventsource与服务器建立连接，服务器端监测到数据变化后，即时推送给客户端，客户端可以实时展示最新的数据。
  2. 实时聊天应用：eventsource可以用于实现实时聊天功能。当有新消息时，服务器可以使用eventsource向客户端推送消息，客户端即时收到消息并进行展示。这样就可以实现类似微信、QQ等实时聊天的功能。
  3. 实时通知提醒：eventsource可以用于发送实时通知提醒。比如，一个新闻网站可以使用eventsource向用户发送最新的新闻推送，用户无需手动刷新页面即可获取到最新的新闻内容。
  4. 实时博客评论：eventsource可以用于实时更新博客评论。当有新的评论提交时，服务器可以使用eventsource将新评论推送给其他正在浏览该博客的用户，实现实时更新评论的效果。

使用EventSource实现ChartGPT的打字效果输出示例：

  1. 在服务器端，创建一个能够生成GPT文本的函数或API。这个函数可以接收用户的输入，并根据输入生成相应的文本。
  2. 在前端页面中，使用JavaScript创建一个新的EventSource对象，指定服务器端的URL。例如：
var eventSource = new EventSource('/gpt');
  1. 在前端页面中，监听来自服务器端的message事件，该事件会在服务器端有新的数据发送时触发。在事件处理函数内部，将接收到的数据逐步添加到文本区域中，模拟打字效果。例如：
eventSource.addEventListener('message', function(event) {
  var textArea = document.getElementById('output');
  textArea.value += event.data; // 将接收到的数据逐步添加到文本区域中
});
  1. 在前端页面中，创建一个输入框或其他交互元素，用于用户输入。当用户输入完成后，将输入内容发送给服务器端。可以通过监听输入框的键盘事件或点击按钮等方式实现。例如：
var inputElement = document.getElementById('input');

inputElement.addEventListener('keyup', function(event) {
  if (event.key === 'Enter') {
    var userInput = inputElement.value;

    // 发送用户输入给服务器端
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/gpt');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({ input: userInput }));

    inputElement.value = ''; // 清空输入框
  }
});

这样，当用户在前端页面中输入内容并发送给服务器端后，服务器端会生成相应的GPT文本，并使用EventSource将文本逐步发送给前端页面，实现打字效果的输出。

image.png

image.png

携带的数据是JSON格式的，浏览器都帮你整合成为一个Object： image.png

综上所述，eventsource、websocket和socket.io都是常见的JS实时通信技术。根据具体需求和项目特点，我们可以选择合适的技术来实现实时通信功能。eventsource适用于简单的推送场景，websocket适用于双向通信场景，而socket.io则是一个更高级的实时通信库，提供了更多的功能和便利性。

无论你是要打造一个实时聊天应用、实时数据展示页面，还是开发实时游戏，选择合适的实时通信技术都是非常重要的。希望本文能够帮助你了解和选择合适的技术，使你的实时通信项目更加出彩！

websocket

二、websocket 与eventsource不同，websocket是一种全双工通信协议，它能够在浏览器和服务器之间建立双向通信的连接。相比于eventsource的单向通信，websocket可以同时实现浏览器向服务器的推送和服务器向浏览器的推送，实现真正的双向通信。

websocket具有极低的延迟，适用于实时游戏、聊天应用等场景。它使用ws或wss协议，能够在浏览器和服务器之间建立长时间的连接。通过websocket，我们可以发送和接收消息，实时更新数据，并处理各种事件。

优点:

  • 支持双向通信，客户端和服务端都可以发送和接收消息；
  • 可以发送二进制数据，支持大文件传输；
  • 协议比较轻量级，能够节省网络带宽和服务器资源；
  • 兼容性较好，大部分现代浏览器都支持 WebSocket。

缺点:

  • 需要在服务端实现 WebSocket 协议的支持；
  • 相对于 HTTP 请求来说，WebSocket 连接需要占用更多的服务端资源；
  • 安全性问题：需要注意防止 CSRF 和 XSS 攻击，避免恶意用户利用 WebSocket 劫持会话或注入脚本等。

示例：

const webSocket = new WebSocket('ws://localhost:8080');

webSocket.addEventListener('open', (event) => {
  console.log('WebSocket connection established!');
});

webSocket.addEventListener('message', (event) => {
  console.log('Received message data:', event.data);
});

webSocket.addEventListener('close', (event) => {
  console.log('WebSocket connection closed!');
});

webSocket.addEventListener('error', (event) => {
  console.error('An error occurred:', event);
});

// 发送消息到服务器
webSocket.send('Hello, server!');

socket.io

三、socket.io socket.io是一个基于websocket的实时通信库，它提供了更简单、更高级的API，使得实时通信变得更容易上手。socket.io能够自动选择最佳的通信方式，如果浏览器不支持websocket，它会自动降级为使用轮询方式进行通信。

socket.io不仅提供了基本的通信功能，还提供了一些小技巧来简化开发过程。例如，它支持房间（Room）概念，允许将多个用户分组在同一个房间中。这样，我们可以通过向特定房间发送消息来实现群聊等功能。

优点：

  • 支持双向通信。
  • 支持广播和房间功能，使得开发者可以轻松地实现实时应用程序。
  • 自带多种传输方式，如 WebSocket、HTTP 长轮询、JSONP 等，可以根据浏览器或设备的不同选择最佳传输方式。

缺点：

  • 使用 Socket.IO 的应用程序需要使用 Socket.IO 作为通信层，不能在应用程序中集成原生 WebSocket 或 EventSource。
  • 对比 EventSource 和 WebSocket，Socket.IO 相对来说更加庞大，需要引入相应的客户端库和服务器端插件，如果应用程序只需要简单的实时通信，使用 EventSource 或 WebSocket 可能更加适合

示例：

// 客户端代码
const socket = io('http://localhost:3000');

socket.on('connect', () => {
  console.log('Socket.io connection established!');
});

socket.on('message', (data) => {
  console.log('Received message data:', data);
});

socket.on('disconnect', () => {
  console.log('Socket.io connection closed!');
});

socket.emit('message', 'Hello, server!');

// 服务端代码
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('A new client is connected!');

  socket.on('message', (data) => {
    console.log('Received message data:', data);
    socket.emit('message', `You said: ${data}`);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected!');
  });
});

ChatGPT3.5版本注册免费用，免费次数到后，评论发帐号手动给增加： gpt.yqdsw.top/#/ai/home

标签：JS实时通信、eventsource、websocket、socket.io

avatar
文章
阅读
粉丝