什么是 WebSockets？
WebSockets 是一种在客户端和服务器之间实现双向通信的协议。它是基于 HTTP 协议的，但是相比于 HTTP，它可以在同一个 TCP 连接上实现持续的、低延迟的通信，并且能够从服务器向客户端推送数据，而不需要客户端不断地向服务器发送请求。
WebSockets 的优势在于可以实时地获取数据更新，这对于需要实时交互的页面，如聊天室、在线游戏等非常有用。在传统的 HTTP 请求中，每次客户端需要更新数据时，它必须向服务器发送请求，服务器生成响应，这样会浪费很多带宽和时间。使用 WebSockets，在客户端和服务器之间建立一条持久的连接，就可以实现实时通信。
在 Next.js 项目中使用 WebSockets
Next.js 是一款基于 React 的服务器端渲染框架。它提供了一些便利的特性，如自动代码分割、服务器端渲染、静态生成等。但是，它并没有直接提供 WebSocket 的支持。所以，如果我们想在 Next.js 项目中使用 WebSockets，我们需要手动实现一些细节。下面，我们来看一下在 Next.js 项目中使用 WebSockets 的方法。
服务端代码
首先，我们需要在 Next.js 项目中创建一个 WebSocket 服务器。我们可以使用 Node.js 的 ws 库实现 WebSocket 的服务器端。在 pages/api 目录下创建一个 websocket.js 文件，添加如下代码：
-- -------------------- ---- -------
------ --------- ---- -----
------ ------- ----- ---- -- -
-- ------------------------- --- ------------ -
----------------------
-------
-
----- --- - --- ------------------ --------- ---- ---
-------------------- ---- -- -
------------------ -- ---------
---------------- --------- -- -
--------------------- -------- -------------
----------------- -------- -------------
---
-------------- -- -- -
------------------- ---------------
---
---
------------------------------- --------- ------- ----- -- -
-------------------------- ------- ----- ---- -- -
---------------------- --- ---------
---
---
--这段代码创建了一个 WebSocket 服务器，当客户端连接到服务器时，WebSocket 服务器会向客户端发送一条消息，告诉客户端已经连接到服务器了。然后，WebSocket 服务器会监听客户端发送过来的消息，并把消息打印到控制台上。最后，当客户端断开连接时，WebSocket 服务器会打印一条日志。
我们在创建 WebSocket 服务器实例时，使用了 { noServer: true } 选项，这样 WebSocket 服务器就不会监听新的 TCP 连接，而是在需要时手动绑定到现有的 HTTP 或 HTTPS 服务器上。这样我们就可以在 Next.js 中使用 upgrade 事件，将 WebSocket 服务器绑定到 HTTP 服务器上，从而启用 WebSocket 协议。
客户端代码
接下来，我们需要在 Next.js 项目的客户端代码中使用 WebSocket。我们可以使用 WebSocket 构造函数来创建 WebSocket 实例。在使用 WebSocket 的过程中，我们需要注意一些细节，如如何建立连接、如何发送数据、如何接收数据等。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
----- ---- - -- -- -
----- --------- ----------- - -------------
----- ---- ------ - ---------------
------------ -- -
----- --- - ------------------------------------------------------
----- ------ - --- ---------------
------------- - -- -- -
---------------------- -- ---------
--------------
--
---------------- - ------- -- -
--------------------- -------- ----------------
-----------------------
--
-------------- - -- -- -
------------------------- ---- ---------
------------
--
------ -- -- -
-- ---- -
-----------
-
--
-- ----
----- ---------- - -- -- -
----- ----- - -----------------------------------------
----- ------- - ------------
----------- - ---
-----------------
--
------ -
-----
-------- -- -----------------
------ ----------- ------------------ --
------- ----------------------------------
------
--
--
------ ------- -----这段代码创建了一个简单的聊天室，在页面中有一个输入框和一个按钮。当用户输入一条消息并点击发送按钮时，客户端会将消息发送到服务器。服务器会将消息原样返回到客户端，并在客户端上显示。
在 useEffect 钩子函数中，我们使用 WebSocket 构造函数来创建一个 WebSocket 实例，并监听其 onopen、onmessage、onclose 事件。当 WebSocket 连接成功时，服务器会发送一条消息告诉客户端已经连接成功。当客户端接收到服务器发送过来的消息时，会将消息的内容显示在页面上。当 WebSocket 连接失败或服务器关闭连接时，我们会将 WebSocket 实例设置为 null。
在发送消息时，我们使用了 WebSocket 实例的 send 方法。这个方法用于向服务器发送一条消息。当用户点击发送按钮时，客户端会将输入框中的消息发送到服务器。
总结
在 Next.js 项目中使用 WebSockets 实现双向通信，需要我们手动实现一些细节，但是这并不难。通过使用 ws 库和 WebSocket 构造函数，我们可以轻松地在 Next.js 中集成 WebSockets，使我们的应用程序能够实时地获取数据更新。在实际的应用中，我们可以使用 WebSockets 来实现在线聊天、实时推送、在线游戏等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f543c48841e9894bb23d9