多语言Web通用应用服务器NGINX Unit

很多人都用过强大的LNMP栈体系跑应用，更多人则用Nginx做一个代理，作为一个Web应用的安全、可以抵抗大流量应用网关和集群入口。LNMP栈可以支持动态应用（PHP和Mysql），Nginx本身也可以用lua写一些动态应用。但是现在应用脚本越来越多样化，应用微服务化，不光是PHP、Python，Java、Ruby，Perl等各种应用可能都会有，虽然有Docker这样的工具，但是配置也比较繁琐，而且对于灵活变化配置Nginx需要每次reload加载不是一个很好的处理方式。为了解决这种问题Nginx团队推出了一个神器——NGINX Unit。今天虫虫就给大家推荐这个工具。

NGINX Unit是一个轻量级、多功能的开源服务器，两个主要功能：

提供静态内容Web服务，

支持七种语言（Node.js,Java,Perl,PHP,Python,Python3,Ruby，WebAssembly）行应用程序代码。

Unit将现代应用程序堆栈的多个层压缩为一个强大的、注重性能、低延迟和可扩展性的一致解决方案。旨在提供一个人Web应用的快捷、通用构建方式。

为了灵活配置和程序化状态控制，Unit还提供原生RESTful JSON API支持动态、零中断更新和灵活配置。

Unit提供开箱即用的能力，可以可靠地扩展到生产级工作负载。通过复杂的异步多线程架构来实现这一点包括多个流程，以确保安全性和稳健性，可以支持当今最先进的云平台。

MacOS

然后安装其他对应的语言包模块。

Docker

可以自定义镜像的语言和版本，方法如下

unix官方支持最广泛的各个发行版的二进制安装包，可使用对应的包管理器中添加官方包地址即可。

比如对于RedHa系的Amazon Linux、Fedora、RedHat

注意，安装后默认控制API调用socket接口为/var/run/unit/control.sock

日志文件为/var/run/unit/unit.log

应用启动用户和组为unit

Debian系

源码安装

用git下载源码，安装各种依赖项目然后安装(较复杂，不建议自己做)。

Unit可以支持多中应用程序。我们简单以一个PHP Hello例子为例进行予以展示，其他语言和脚本基本同理。我们将脚本文件保存在

保存在/www/helloworld/index.php，内容为：

为了在Unit上运行该脚本，在安装好unit-php语言模块后，先设置一个应用程序对象。该应用配置config.json:

Unit可以用Web请求动态配置和让配置生效，可以通过一个PUT请求调用/config/applications API，为了安全起见，默认只允许在本地以Unix域套接字方式调用：

接下来，然后用命令行访问给应用的状态：

这样Unit中该应用就配置好，可以进行访问

再调用API可以获得，该次访问的信息：

单元的输出应包含组织整齐的两个片段：

NGINX Unit是一个轻量级、多功能的开源服务器，可以提供一个优雅的，可以随掉随用、动态配置、动态发布和更新的多语言支持的应用服务器，在于微服务和多语言Web应用共存的今天，NGINX Unit无疑是一个很好的解决方案，当然更多功能探索，大家如果需要可以回复探讨，后续可以提供。

服务器部署网站的方法

hello 大家好，我是 superZidan，这篇文章想跟大家聊聊 使用 Socket.io 和 React 开发一个聊天应用，如果大家遇到任何问题，欢迎

相信大家对于 web 版的线上聊天室都不陌生，这篇文章主要讲的就是如何使用 Socket.io 和 React 开发一下简单的线上聊天应用。

所谓线上聊天应用，就是你给一个人或者一个群发送一条消息，他们可以看到这条消息并且可以回复。既简单又复杂。

开发一个聊天室应用，你需要在新信息来到的时候及时的感知到。

通常来说，为了获得服务端的信息，我们需要发送一个 HTTP 请求。但是如果使用 websockets，服务端能够主动告知你有新的信息到来而不需要客户端发起请求。

在本文中，我们将利用 Socket.io 提供的实时通信来创建一个开放式聊天应用程序，允许用户在该应用程序上发送和接收来自多个用户的消息。同时你也将学习到如何检测用户是否在线以及用户什么时候在输入。

为了更好的掌握这篇文章讲到的内容，你可能需要先掌握关于 React.js 和 Node.js 的基础知识

Socket.io 是一个十分流行的 JavaScript 库。它允许我们在浏览器和 Node.js 服务端之间创建一个实时的，双向的通信。它是一个高性能并且可靠的库，经过优化可以以最小的延迟处理大量数据。它遵循 WebSocket 协议并提供更好的功能，比如降级为 HTTP 长链接或者自动重连，这些功能可以协助我们构建一个高效的实时的应用。

在这个章节中，我们将开始为聊天室应用搭建项目环境。您还将学习如何将 Socket.io 添加到 React 和 Node.js 应用程序，并连接两个开发服务器以通过 Socket.io 进行实时通信。

创建项目目录，并创建两个子目录名为 client 和 server

进入到 client 目录下，通过终端创建 React.js 项目

安装 Socket.io 客户端 API 以及 React Router

从 React 项目中删除冗余的文件像是 logo 和 测试文件，像下面一样更新 App.js 文件来显示 Hello World

接下来，进入 server 目录下，创建一个 package.json 文件

安装 Express.js , CORS , Nodemon , 和 Socket.io 服务端 API

创建一个 index.js 文件，作为 web 服务器的入口文件

使用 Express 创建一个简单的 Node.js 服务。当我们在浏览器访问 http://localhost:4000/api 的时候，下面的代码会返回一个 JSON 对象

导入 HTTP 和 CORS 库，来让数据能够在客户端和服务端之间传递

接下来，添加 Socket.io 到项目中去创建一个实时连接

从上面的代码中看到，每当用户访问页面的时候，socket.io("connection") 建立了与 React 应用的连接，然后为每个 socket 创建一个唯一的 ID ，然后将 ID 打印到控制台

当你刷新或者关闭页面，socket 会触发 disconnect 事件，显示一个用户已从 socket 断开链接。

接下来，通过在 package.json 中添加 scripts 启动来配置 Nodemon 。代码如下

你可以通过下面的命令来通过 Nodemon 启动服务

打开 client 目录下的 App.js 文件，把 React 应用连接到 Socket.io 服务

启动客户端 React.js 服务

在客户端和服务端的服务都启动之后，React 应用的 ID 会显示在服务端的终端上。

恭喜 ，React 应用已经通过 Socket.io 成功连接到服务端

对于本文的其余部分，我将引导你完成为聊天应用程序创建网页以及在 React 应用程序和 Node.js 服务器之间来回发送消息的过程。 我还将指导你如何在收到新消息时添加自动滚动功能以及如何在你的聊天应用程序中获取活跃用户

在本章节中，我们将为聊天应用创建一个主页。主页会接收用户名并将其保存到本地存储以供识别

在 client/src 目录下创建一个名为 components 的目录。然后，创建主页的组件

将下面的代码复制到 Home.js 文件中。 该代码片段显示一个表单输入，该表单输入接受用户名并将其存储在本地存储中。

接下来配置 React Router 来让聊天应用的不同页面可以相互跳转。对于这个应用来说，主页和聊天页就足够了

把下面的代码复制到 src/App.js 文件中

该代码片段使用 React Router v6 为应用程序的主页和聊天页面分配不同的路由并且将 socket.io 库传到组件中。我们将在接下来的章节中创建聊天页面。

跳到 src/index.css 文件，复制下面的代码。它包含了这个项目所需要用到的所有 CSS

我们已经创建了主页，接下来我们开始设计聊天页面的样式和交互

在这个章节，我们将创建聊天界面，允许我们发送消息和看到在线用户

从上面的图片可以看到，聊天页面被分成三个部分：ChatBar（侧边栏显示活跃的用户）；ChatBody （包含发送的消息和头部）；ChatFooter （包含发送输入框和发送按钮）

既然我们已经定义了聊天页面的布局，现在可以创建一个这样布局的组件

创建 ChatPage.js 文件，复制下面的代码。你需要组建 ChatBar，ChatBody 和 ChatFooter

复制下面的代码到 ChatBar.js 文件中

这里我们创建一个组件来显示已经发送的消息和标题

在这里，我们将在聊天页面底部创建输入和发送按钮。 提交表单后，消息和用户名出现在控制台中。

在本节中，您将学习如何通过 Socket.io 将消息从 React 应用程序发送到 Node.js 服务器，反之亦然。 要将消息发送到服务器，我们需要将 Socket.io 库传递到 ChatFooter - 发送消息的组件

更新 ChatPage.js 文件以将 Socket.io 库传递到 ChatFooter 组件中

更新 ChatFooter 组件中的 handleSendMessage 函数以将消息发送到 Node.js 服务器

handleSendMessage 函数在发送包含用户输入、用户名、生成的消息 ID 以及 socket 或客户端的消息事件之前检查文本字段是否为空以及用户名是否存在于本地存储（从主页登录） Node.js 服务器的 ID。

打开服务器的 index.js 文件，更新 Socket.io 相关代码以监听来自 React 应用程序客户端的消息事件，并将消息打印到服务器的终端

我们已经能够在服务器上检索消息； 因此，让我们将消息发送给所有连接的客户端。

更新 ChatPage.js 文件以监听来自服务器的消息并将其显示给所有用户

从上面的代码片段中，Socket.io 监听通过 messageResponse 事件发送的消息并将数据传到消息数组中。 消息数组被传递到 ChatBody 组件以显示在 UI 上

更新 ChatBody.js 文件来渲染消息数组中的数据

上面的代码片段根据是你或是其他用户发送了消息来显示消息。 绿色的消息是你发送的消息，红色的是来自其他用户的消息。

恭喜 ，聊天应用现在可以正常使用了。 你可以打开多个 Tab 并将消息从一个 Tab 发送到另一个 Tab

在本节中，你将学习如何获取所有活跃用户并将他们显示在聊天应用程序的聊天栏上。

打开 src/Home.js 并创建一个在用户登录时监听的事件。更新 handleSubmit 函数如下：

创建一个事件监听器，每当用户加入或离开聊天应用时，它就会更新 Node.js 服务器上的 users 数组。

当有新用户加入聊天应用，socket.on("newUser") 就会被触发。用户的详细信息（Socket ID 和用户名）保存到 users 数组中，并在名为 newUserResponse 的新事件中发送回 React 应用程序

在 socket.io("disconnect") 中，当用户离开聊天应用程序时更新 user 数组，并触发 newUserReponse 事件以将更新的用户列表发送到客户端。

接下来，让我们更新用户界面 ChatBar.js ，来显示活跃用户列表

useEffect hook 监听从 Node.js 服务器发送的响应并收集活跃用户列表。 该列表被映射到视图中并实时更新

恭喜 ，我们已经能够从 Socket.io 中获取活跃用户列表。 接下来，让我们学习如何向聊天应用添加一些很酷的功能

在本节中，您将了解如何在收到新消息时添加自动滚动功能以及标识用户正在键入的功能

像下方代码一样更新 ChatPage.js

更新 ChatBody 组件来包含一个带有 lastMessageRef 的元素

从上面的代码片段来看，lastMessageRef 附加到消息底部的一个 div 标签，它的 useEffect 有一个依赖项，即 messages 数组。 因此，当消息更改时，lastMessageRef 的 useEffect 会重新渲染。

为了在用户输入时通知其他用户，我们将在输入框上使用 JavaScript onKeyDown 事件监听器，它会触发一个向 Socket.io 发送消息的函数，如下所示：

在上面的代码片段中，handleTyping 函数会在用户使用 input 输入框键入时触发键入事件。 然后，我们可以在服务器上监听 typing 事件，并通过另一个名为 typingResponse 的事件向其他用户发送包含数据的响应

接下来监听 ChatPage.js 文件中的 typingResponse 事件，将数据传入 ChatBody.js 文件进行显示

更新 ChatBody.js 文件去给用户显示输入状态

恭喜，您创建了一个聊天应用程序！

通过添加允许用户创建 私人聊天室 和 直接消息传递 的 Socket.io 私人消息传递功能，使用用于用户授权和身份验证的身份验证库以及用于存储的实时数据库，随意改进应用程序。

Socket.io 是一个非常棒的工具，具有出色的功能，使我们能够构建高效的实时应用程序，例如体育网站、拍卖和外汇交易应用程序，当然还有通过在 Web 浏览器和 Node.js 服务器之间创建持久连接的聊天应用程序

如果你期待在 Node.js 中构建聊天应用程序，Socket.io 可能是一个很好的选择

你可以在此处找到本教程的源代码：

本文原文地址：https://dev.to/novu/building-a-chat-app-with-socketio-and-react-2edj