使用 Server-sent Events 构建即时聊天应用程序-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的普及，即时通讯已经成为人们生活中不可或缺的一部分。在前端开发中，使用 Server-sent Events 技术可以轻松构建即时聊天应用程序。本文将介绍使用 Server-sent Events 构建即时聊天应用程序的所有步骤，包括概念、实现以及示例代码。

Server-sent Events 简介

Server-sent Events（简称 SSE）是一种用于服务器向客户端推送数据的技术。它通过 HTTP 连接将实时数据传输到客户端，而无需客户端发起请求。SSE 建立在长轮询（Long Polling）机制的基础上，可以实现服务端向客户端实时推送消息，是一种非常适合实时通讯的技术。

实现步骤

1. 创建服务器

首先，我们需要创建一个 Node.js 服务器。可以使用 Express 框架快速创建一个服务器。示例代码如下：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

2. 创建客户端

创建一个 HTML 页面，用于展示聊天记录和发送消息。在页面中引入一个 JavaScript 文件，用于与服务器进行通信。示例代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>即时聊天</title>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="message" placeholder="输入消息">
  <button id="send">发送</button>
  <script src="client.js"></script>
</body>
</html>

3. 实现服务器端发送事件

在服务器端，我们需要实现一个路由，用于向客户端发送事件。在 Express 中，可以使用 res.sse() 方法向客户端发送事件。示例代码如下：

// javascriptcn.com 代码示例
app.get('/stream', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
  }, 1000);
});

4. 实现客户端接收事件

在客户端，我们需要实现一个 JavaScript 文件，用于接收服务器端发送的事件。可以使用 EventSource 对象实现事件的接收。示例代码如下：

// javascriptcn.com 代码示例
const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
  const messages = document.getElementById('messages');
  messages.innerHTML += `<p>${event.data}</p>`;
};

const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send');

sendButton.onclick = () => {
  const message = messageInput.value;
  fetch('/message', {
    method: 'POST',
    body: JSON.stringify({ message }),
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

示例代码

完整的示例代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.use(express.static('public'));

app.get('/stream', (req, res) => {
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
  }, 1000);
});

app.post('/message', (req, res) => {
  console.log(req.body.message);
  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>即时聊天</title>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="message" placeholder="输入消息">
  <button id="send">发送</button>
  <script src="client.js"></script>
</body>
</html>

// javascriptcn.com 代码示例
const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
  const messages = document.getElementById('messages');
  messages.innerHTML += `<p>${event.data}</p>`;
};

const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send');

sendButton.onclick = () => {
  const message = messageInput.value;
  fetch('/message', {
    method: 'POST',
    body: JSON.stringify({ message }),
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

总结

使用 Server-sent Events 技术可以轻松构建即时聊天应用程序。在实现过程中，我们需要创建一个 Node.js 服务器，使用 Express 框架快速创建路由，向客户端发送事件。在客户端，我们需要使用 EventSource 对象接收事件，并使用 fetch 方法向服务器发送消息。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65133f9f95b1f8cacdbb09e6