几行代码,竟然就能做个聊天室!

2022-05-25 15:42:04 浏览数 (1)

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

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

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

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 服务,保证基本的后端能启动
  1. 新建一个前端页面,写出发送消息的界面,并且让后端提供页面的访问能力

页面长这样

  1. 前后端整合 Socket.IO,通过 socket.on 来监听某个事件(可以自定义事件名):
代码语言:javascript复制
// 监听 chat message 事件
socket.on('chat message', (msg) => {
  // 收到消息后广播到其他客户端
  socket.broadcast.emit('chat message', msg);
});
  1. 当用户(客户端)点击发送消息按钮时,会触发 chat message 事件:
代码语言:javascript复制
socket.emit('chat message', '用户输入的消息');

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

  1. 其他人(前端)收到消息后,只需要将消息作为新的 DOM 元素插入到页面消息列表里就可以啦,示例代码如下:
代码语言:javascript复制
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 这个库,实现了实时监控视频下评论的功能,效果如下:

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

0 人点赞