几行代码，竟然就能做个聊天室！

大家好，我是鱼皮，我们的工作和生活离不开聊天软件，但是你知道怎么自己开发一个聊天软件么？

其实，做一个自己的聊天软件并不难，而且可以说是 “异常简单”！只要了解一下前端开发、了解即时通讯的基本概念、再搭配上一个好用的、现成的类库就可以了。

今天就带大家用几行代码做个简单的聊天室~

new 个聊天室

原理

首先我们要搞清楚发送消息的人和接受消息的人是如何保持联系的。最直接的方式肯定就是这两个人（服务器）直接建立连接：

那么如果是三个人两两聊天，每个人就要和其他人建立两条连接：

那么如果一个 2000 人的聊天室，情况可能是这样的，每个人要建立 1999 个连接！

可想而知，这种点对点的方式对于聊天室来说非常浪费资源，而且也没办法控制用户、保证连接的安全性。

所以更合理的方法是，让所有加入聊天室的同学连接同一个服务器，只需要建立一个连接，有消息都往服务器去发；由服务器来决定将收到的消息转发 / 广播给哪些用户：

这便是聊天室的一个基本模型。服务器程序的实现上我们可以采用经典的 HTTP 协议、也可以采用 WebSocket 协议。但由于 HTTP 协议是单向的、也不够实时，所以通常采用后者。

WebSocket 协议是一个应用层协议，能够让客户端和服务器之间进行双向实时通信，可以将它想象成传声筒中间的那根线：

要注意，WebSocket 并不是 Socket！Socket 不是一个协议，只是对 TCP / UDP 等协议进行抽象封装的一组接口，目的是为了让大家更方便地编程。而 WebSocket 只是在收发消息时 模拟 了 Socket 的实现而已。

实现

搞清楚原理后，咱们的聊天室就做完了，大家下期再见！

好吧，开个玩笑，了解原理后，写代码实现啥的真的太简单了，因为我们根本不需要自己从 0 开始编写 WebSocket 的实现，只要选一个现成的库就好了。

之前我一直在用 Java 的 Vertx 和 Netty，但前天直播的时候我只是想做一个很简单的工具，就不打算用 Java 这种强类型语言了，而是选择了对前端同学更友好的 Node.js，用一个 JS 语言就能同时实现前端和服务端，岂不美哉？！

Node.js 有一个非常优秀的开源 WebSocket 封装库 Socket.IO ，我们可以用它来开发聊天室。

进入官网，直接在主页就能看到示例代码，分别为服务端和客户端，只用几行代码就能让两者互相问好：

然后我们进入 Examples，官方文档竟然已经给我们提供了聊天室的 Demo 代码！

大致的步骤就是这样：

1. 使用 Express 新建一个 Node.js 服务，保证基本的后端能启动

2. 新建一个前端页面，写出发送消息的界面，并且让后端提供页面的访问能力

3. 前后端整合 Socket.IO，通过 socket.on 来监听某个事件（可以自定义事件名）：

// 监听 chat message 事件
socket.on('chat message', (msg) => {
  // 收到消息后广播到其他客户端
  socket.broadcast.emit('chat message', msg);
});

4. 当用户（客户端）点击发送消息按钮时，会触发 chat message 事件：

socket.emit('chat message', '用户输入的消息');

然后服务端就会将这条消息广播给其他人（客户端）。

5. 其他人（前端）收到消息后，只需要将消息作为新的 DOM 元素插入到页面消息列表里就可以啦，示例代码如下：

socket.on('chat message', function(msg) {
  var item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

整个流程大概就是这样，大家可以去 Socket.IO 官网看到这个简易聊天室的完整教程和代码。不过这只是最基础的聊天室 Demo，要真做一个企业级的聊天室，背后的门道还是非常多的。

我最近打算做个小工具，所以前两天也直播带大家玩了一下 Socket.IO 这个库，实现了实时监控视频下评论的功能，效果如下：

竟然还有同学企图通过评论区的消息来攻击我的监控后台哈哈，离谱！

直播回放依然是放在我自己的 编程知识星球 中，包括请求获取、API 文档带读、Socket.IO 监控评论的前后端实现，感兴趣的同学欢迎加入星球观看~

加入星球后还可以进圈子和爱学习的朋友们一起交流编程、向鱼皮等已经上岸大厂的同学提问、得到清晰的学习规划、得到学习路线和海量教程 & 项目资源等。相信加入星球后，你会有很大的改变！

星球内还有最新完结的 用户中心项目，视频时长超过一整天的干货~

某位星球小伙儿的项目收获：

目前星球已经有 6300 多名小伙伴加入，限时优惠 60 元，等 7500 人的时候还会再涨价（因为维护星球、回答问题真的太累了），想更好学习编程的同学欢迎扫码领券加入：

拜~ 打工去咯！