在跟着 IBM 的课程学习全栈开发的时候，期间想到了我于两年前写的一个小项目，当时学习了 Python 的 Flask 框架，就异想天开地编写了一个基于频道的聊天室。当时并不知道实时通信的原理，只是简单地用 Flask 和 SQLite—— 连 Socket.io 都没用上 —— 实现了一个简单的类 Slack 聊天室。

现在见识到了更多的技术，年轻莽撞的我自然是想要重写这个项目。不过具体能不能完成，就是另外一回事了。

项目结构

首先，我们需要新建两个文件夹（废话）：一个是用于存放前端代码的 client 文件夹，另一个是用于存放后端代码的 server 文件夹。

在 WebStorm 中，先在 client 文件夹中新建一个 React 项目，然后在 server 文件夹中新建一个 Express 项目。

总体的项目结构差不多是这样的：

总项目（其实不放在一起也OK）/├─ client/│  ├─ node_modules/│  ├─ public/│  ├─ src/│  │  ├─ App.js│  │  ├─ index.js│  ├─ package.json├─ server/│  ├─ bin/│  │  ├─ www│  ├─ node_modules/│  ├─ public/│  ├─ routes/│  ├─ views/│  ├─ app.js│  ├─ package.json

• 在 client 文件夹中，最重要的便是 src 文件夹，其中的 App.js 和 index.js 是 React 项目的入口文件
• 在 server 文件夹中，最重要的便是 app.js 文件。不过由于 bin/www 文件是服务器的启动关键，所以需要修改它而不是 app.js 文件

后端

我们率先开始装包：

npm install socket.io cors nodemon

不装 Express 包自然是因为 WebStorm 已经帮我们装好了，哈哈。

Socket.io 包是我们这次项目的核心。它能够轻松地实现实时通信，也就是多人聊天的基础。Cors 包用于解决跨域问题，比方说我们的前端项目是运行在 localhost:3000，而后端项目是运行在 localhost:4000，这样就会出现跨域问题。而 Nodemon 包是用于自动重启服务器的，这样我们就不用每次修改代码后都手动重启服务器了，懒人福音。

我们直接来看 bin/www 文件。它的一行代码便告诉了我们它的作用：

/** * Create HTTP server. */const server = http.createServer(app);

bin/www 创建了一个 HTTP 服务器，而 app 则是我们的 Express 应用。

在导入依赖的地方，我们先导入 Socket.io 和 Cors 包：

const cors = require('cors');const {...