使用 Next.js 和 WebSocket 构建实时应用程序
介绍
在当今快节奏的数字世界中，实时数据交换对于开发动态交互式 Web 应用程序至关重要。WebSocket 是一种强大的方法，可以实现客户端和服务器之间的实时双向通信。在本篇博文中，我们将探讨如何将 WebSocket 与 Next.js 结合使用来创建实时应用程序。
WebSocket 是一种通信协议，它通过单个 TCP 连接提供全双工通信通道。它支持客户端和服务器之间建立实时、事件驱动的连接。
与遵循请求-响应模型的传统 HTTP 软件不同，WebSocket 支持双向通信。这意味着客户端和服务器可以随时互相发送数据，而无需持续轮询。要了解更多关于 WebSocket 的信息，请点击此处。事不宜迟，让我们开始开发实时通信应用程序。首先，我们将创建一个新的 Next.js 项目。
打开你常用的代码编辑器，在终端运行以下命令来创建一个新项目。
npx create-next-app@latest real-time-app
请务必按照下图所示设置项目。
完成后，运行以下命令在代码编辑器中打开项目文件夹。
cd real-time-app
code .
安装依赖项
运行以下命令ws为Node.js安装WebSocket库。
npm install ws
创建 WebSocket 服务器
首先，在server.js根目录下创建一个文件，并将以下代码插入其中。
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const WebSocket = require('ws');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = createServer((req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
});
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log(`Received message: ${message}`);
ws.send(`Server: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
server.listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
});
这段代码用于搭建服务器。它首先导入必要的模块，并在 NODE_ENV 未设置为 'production' 时，以开发模式启动 Next.js 应用。该应用会配置服务器，使其能够使用 Next.js 的请求处理程序处理 HTTP 请求。此外，它还会创建一个连接到 HTTP 服务器的 WebSocket 服务器 (wss)。
当 WebSocket 客户端连接时，服务器会记录该连接。它会监听来自客户端的消息，记录这些消息，并发送响应。它还会记录客户端断开连接的时间。服务器监听 3000 端口。
接下来，修改 package.json 文件中的 Script，使其使用我们刚刚创建的自定义服务器。
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
在 Next.js 中集成 WebSocket 客户端
在本部分中，我们将在 Next.js 应用程序中创建一个 WebSocket 客户端。首先在 app 目录中创建一个名为 hooks 的文件夹。
然后，创建一个名为useWebSocket.js.
将以下代码插入到该文件中
import { useEffect, useState } from 'react';
const useWebSocket = (url) => {
const [messages, setMessages] = useState([]);
const [ws, setWs] = useState(null);
useEffect(() => {
const socket = new WebSocket(url);
setWs(socket);
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
return () => {
socket.close();
};
}, [url]);
const sendMessage = (message) => {
if (ws) {
ws.send(message);
}
};
return { messages, sendMessage };
};
export default useWebSocket;
这段代码定义了一个useWebSocket用于管理 WebSocket 连接的自定义 React Hook。它使用提供的 URL 建立与 WebSocket 服务器的连接，将接收到的消息存储在状态数组中，并提供一个通过 WebSocket 发送消息的函数。
useEffect：在组件挂载时打开 WebSocket 连接，在组件卸载时关闭该连接。
onmessage：根据收到的消息更新消息状态。
sendMessage：如果 WebSocket 连接已建立，则通过 WebSocket 发送消息。
该钩子会返回消息数组和 sendMessage 函数，供组件使用。
在组件中使用 WebSocket
要在我们的组件中使用 WebSocket，请使用page.js以下代码更新文件。
'use client'
import { useState } from 'react';
import useWebSocket from '@/app/hooks/useWebSocket';
const Home = () => {
const { messages, sendMessage } = useWebSocket('ws://localhost:4000');
const [input, setInput] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
sendMessage(input);
setInput('');
};
return (
<div>
<h1>Real-time Chat</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">Send</button>
</form>
<div>
{messages.map((msg, index) => (
<div key={index}>{msg}</div>
))}
</div>
</div>
);
};
export default Home;
这是一个用于实现基于 WebSocket 的实时聊天功能的 React 组件。该组件利用 React 的useStatehook 来管理输入字段的状态，使用户能够输入和发送消息。
主要特点：
-
WebSocket 集成：利用自定义的 useWebSocket 钩子建立到 ws://localhost:4000 的 WebSocket 连接。
-
状态管理：使用 useState 处理当前消息输入。
-
消息处理：handleSubmit 函数通过 WebSocket 发送输入的消息，然后清除输入字段。
-
实时更新：通过遍历消息数组，实时显示接收到的消息。
工作原理：
-
连接：组件挂载时，useWebSocket 会发起一个 WebSocket 连接。
-
发送消息：当表单提交时，sendMessage 会发送消息，并且输入字段会被重置。
-
显示消息：接收到的消息会随着到达而动态显示。
运行应用程序
在终端运行以下命令启动应用程序。打开浏览器并访问http://localhost:3000。您应该会看到一个简单的聊天界面，您可以在其中发送消息并接收实时更新。
结论
最后，使用 Next.js 和 WebSocket 开发实时应用程序是提升用户体验的有效途径，它能够实现即时通信和更新。本文将演示如何搭建 WebSocket 服务器和 Next.js 应用程序，从而创建一个流畅的实时聊天界面。借助这些技术，开发者可以将动态交互功能融入到他们的在线应用程序中，从而打造更具吸引力和响应速度的用户互动体验。这种方法不仅增强了应用程序的功能，也为未来的实时应用程序开发奠定了基础。
文章来源：https://dev.to/danmusembi/building-real-time-apps-with-nextjs-and-websockets-2p39