💥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