本文构建的核心是一个多国语言在线客服聊天系统源码。我们将在这里保持非常简单。我们的系统将能够以最少的用户信息注册新用户，创建并向聊天室中的用户发送消息，并最终在用户想离开时将其从聊天室中注销。
对于奖励积分，我们还将使用SMS通知系统配置我们的系统，每当通过我们的系统发送消息时，它将向管理员帐户发送文本通知。
源码: e.cusscode.top/s
该系统将利用多种技术来发挥作用。最重要的是 Cosmic JS 用于管理我们所有的数据：我们的用户和消息。为了跟随本教程，您应该在他们的平台上创建一个免费存储桶并创建一个用户和一个消息对象。
我们使用 Node JS 作为我们的运行时环境，因此请确保您安装了最新（ish）版本的节点。有了这项业务，我们就可以开始建设了。
这是一个全栈应用程序，这意味着我们正在构建一个 Web 服务器来处理我们的请求并为我们的客户端应用程序提供服务。我们将创建一个Express应用程序，该应用程序将在我们的 Node JS 服务器上运行，以处理到小型 API 的路由并提供 HTML，以及Webpack以捆绑我们使用React和Graphql构建的客户端界面。通过这种方式，我们可以利用中央服务器向应用程序的不同部分发出请求：我们的接口、我们的控制器和我们的 Web 服务。
构建我们的 Web 服务器
这是我们的应用程序的支柱，它将允许我们控制核心应用程序的各个部分。我们将首先创建和初始化一个项目目录，我们将在其中安装所有依赖项。让我们打开终端并创建一些文件：
$ mkdir chat
$ cd chat
这将创建一个名为chat的目录并将我们的当前目录更改为该聊天目录。现在我们可以将此目录初始化为Node项目：
$ npm init
您的终端将向您显示一些提示，以创建我们的package.json文件，该文件将包含有关我们项目的大部分元数据。我建议您通过这些步骤按回车键，除非您知道要为您的应用程序提供的某些特定信息。您可以随时更改这些值。
现在让我们安装一些运行项目所需的节点模块并将它们保存到package.json依赖项列表中。我们将安装捆绑器 webpack以及捆绑 JS、HTML 和 SASS /CSS 文件以及我们的服务器框架 express 所需的加载器：
$ npm install --save webpack webpack-cli clean-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader file-loader sass-loader css-loader node-sass url-loader style-loader express express-session cookie-parser body-parser http://socket.io socket.io-client cosmicjs dotenv
我们将这些都保存为项目依赖项，因为我们使用的任何部署容器都需要使用它们来构建和运行我们的应用程序。
接下来，我们还将安装渲染用户界面所需的依赖项：
$ npm install --save react react-dom react-router-dom react-icons graphql react-apollo apollo-boost axios
设置我们的入口文件
现在我们已经安装了一些依赖项，我们需要创建一个入口文件来处理对我们应用程序的所有请求。当用户向默认路由“/”发出请求时，我们将提供一个 HTML 文件。当客户端向我们的 API 发出请求时，我们使用附加了“/api”的端点。第一步只是创建文件：
$ touch index.js
让我们在文本编辑器中打开这个文件并设置Express，以便在浏览器导航到我们的 localhost 服务器时提供一些 HTML：
我们正在寻找一个保存在./public目录中的index.html文件，所以让我们继续在./public/index.html中创建这个文件，并插入一些样板文件以确保我们的 HTML 由我们的快递服务器。
我们应该能够使用node启动我们的服务器：
$ node index.js
当此命令运行时，我们应该会看到一条简单的控制台消息：
Cosmic Messenger listening on port : 3000
现在将我们的浏览器指向localhost:3000将向我们显示一个几乎空白的屏幕，但现在我们在页面顶部看到一个小“Hello World”。现在我们的服务器设置为从我们的 html 文件中提供内容。
配置 Webpack
我们想用React构建我们的接口，但是我们需要从我们的节点服务器可以访问的目录中提供这个接口。我们还需要将我们用于构建组件的花哨语法编译为所有浏览器都可以处理的东西。为此，我们将使用Webpack将所有文件打包到特定位置，并使用 Babel 编译所有代码。
让我们创建一个名为webpack.config.js的文件并添加一些配置来捆绑我们的客户端界面：
这将允许我们创建源代码并使用我们喜欢的用于结构化逻辑的任何目录结构以有意义的方式组织它，然后将它们全部捆绑到一个文件中，我们的index.html可以在从我们的 webServer 提供服务时引用它。
初始化在线客服系统源码：
我们已经创建了配置文件，但现在我们需要创建一些源代码并确保webpack正确捆绑所有内容。让我们继续创建一个名为 src 的文件夹并在其中触摸一个名为app.js的文件。从那里我们可以创建一个简单的 React 组件，该组件将呈现与以前相同的内容，但现在我们正在提供捆绑在一起的 javascript 并注入到我们的 web 服务器提供的 index.html 中。服务器端渲染宝贝！
这是我们的app.js文件最初的样子：
在我们运行webpack并提供我们的界面之前，我们需要安装一些开发者依赖项并向我们的package.json添加一些简单的配置值。具体来说，我们需要告诉我们的服务器我们正在使用babel来编译我们的界面代码和一些 npm 脚本，以便我们可以运行我们的 Web 服务器并捆绑我们的 React 代码。
让我们安装一些我们只需要用于本地开发目的的依赖项：
$ npm install --save-dev morgan nodemon webpack-dev-server
安装完这些之后，让我们打开package.json并向我们的脚本对象和babel配置对象添加一个prestart、start和dev属性。事情应该是这样的：
现在我们可以通过简单的运行同时运行webpack和 node：
$ npm run dev
稍后您将看到来自webpack的一些输出文本：
返回localhost:3000应该会产生与以前相同的结果，但现在我们正在服务一个React应用程序，允许我们创建合理的组件类并在我们的index.html中呈现它们。
创建我们的 REST API
我们将通过我们现在配置的快速路由向我们的服务器代码发出请求，从而与我们的 Cosmic JS 资源交互。
我们将需要三个POST路由来处理对我们服务器的请求。一种用于注册访问该应用程序的用户，一种用于通过信使发送的消息，以及用于想要离开聊天的用户的注销路径。
我们还想配置中间件来处理通过我们的 api、body-parser 发送的请求主体，这是一个用于创建会话 cookie 的模块，以弱验证对我们的消息服务 express-session 的请求。最后，我们需要配置 Web 套接字，以便我们可以向通过 http://socket.io 连接到我们服务器的所有客户端发出事件。
http://Socket.io 暂时会发出 3 个单独的事件：一个是用户注册时，以便其他客户端可以实时跟踪谁登录到应用程序。相反，我们正在跟踪一个注销事件，该事件将让用户知道用户何时离开聊天。一个用于发送 *消息时。
如果您没有在我们的服务器设置开始时安装它们，您可以使用快速npm命令安装它们：
$ npm install --save http://socket.io socket.io-client express-session body-parser
我们使用了一个名为twilioNotifications和cosmicjs的中间件，需要在我们的服务器正常运行之前对其进行配置。为了使 twilio 通知起作用，我们需要创建一些中间件来控制何时发送 SMS 消息。我们还需要使用 twilio Web 服务器的身份验证令牌和密钥来配置此中间件。对于 cosmicjs，我们需要做同样的事情，获取一些 Auth Tokens 并将它们保存在我们的环境变量配置文件中。
配置我们的环境变量
让我们在项目目录的根目录下创建一个名为 .env 的文件。我们需要在其中存储一些环境变量，还需要为我们的 Web 服务存储一些敏感的配置变量。入口文件：index.js，并添加我们的路由和中间件配置。
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。E-MAIL:704559159@qq.com
