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

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

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

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

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 代码！

大致的步骤就是这样：

使用 Express 新建一个 Node.js 服务，保证基本的后端能启动新建一个前端页面，写出发送消息的界面，并且让后端提供页面的访问能力

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

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

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

socket.emit("chatmessage","用户输入的消息");

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

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

socket.on("chatmessage",function(msg){varitem=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 人的时候还会再涨价（因为维护星球、回答问题真的太累了），想更好学习编程的同学欢迎扫码领券加入：

拜~ 打工去咯！

往期推荐

我滴项目完成啦！！！

看完这个，我直接把 SQL 刷通了！

不就部署个网站么？还能玩出花来？

上岸啦！

怎么做个不用网络的软件？

关键词： 发送消息 就是这样 感兴趣的