0202年了，QQ、微信等聊天工具已經非常成熟，一般的情況下沒有必要去建立一個IM應用了。現在的開源技術，通過一些簡單快速的開發即可實現一款Web IM，可以適用於多客服系統、內部溝通平臺等等。

新增基礎依賴

npm install --save socket.io expressnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

在package.json內增加start指令碼（為了使用ES6+特性，引入babel）

"start": "babel-node index.js"

邏輯實現編輯index.html，內容如下<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script><h1 id="ucount"></h1><div id="msgs"></div><input type="text" id="text" /><script> var socket = io.connect("/msg"); var msgs = $("msgs"); function $(id) { return document.getElementById(id); } // 收到訊息時，將訊息輸出到頁面上 socket.on("message", function(data) { msgs.innerHTML += data + "<br />"; }); // 線上人數變化時更新介面 socket.on("online", function(u) { $("ucount").innerHTML = "當前" + u.ucount + "人線上"; }); $("text").addEventListener("keyup", function(e) { // 輸入回車時，傳送給伺服器 if (e.keyCode === 13) { var t = $("text").value; socket.emit("message", t, function() { msgs.innerHTML += t + "<br />"; }); $("text").value = ""; } });</script>編輯index.js，內容如下import http from "http";import path from "path";import express from "express";import socketIO from "socket.io";const app = express();const server = http.Server(app);app.set("views", path.join(__dirname, "views"));app.set("view engine", "jade");app.use(express.json());// 頁面模板app.get("/", function(_req, res) { res.sendFile(__dirname + "/index.html");});initWebIM(app, server, "/msg");server.listen(8080);let userCount = 0;const users = {};const noop = () => {};function initWebIM(app, server, endpoint) { const io = socketIO(server); io.of(endpoint).on("connection", function(socket) { // 連線時，記錄使用者 setUser(socket.id, { sid: socket.id, socket: socket }); // 廣播新使用者上線/使用者數變化 // 廣播：發給除了當前socket之外的所有socket socket.broadcast.emit("online", { ucount: userCount }); // 當前使用者返回 socket.emit("online", { ucount: userCount }); // 服務端收到訊息時，廣播給大家 socket.on("message", function(data, callback) { callback = callback || noop; socket.broadcast.emit("message", data); // 回撥，傳送者更新介面 callback(); }); // 下線群發通知 socket.on("disconnect", function() { unsetUser(socket.id); socket.broadcast.emit("online", { ucount: userCount }); }); });}function setUser(socketId, info) { var isNew = false; if (!users[socketId]) { users[socketId] = {}; userCount++; isNew = true; } Object.assign(users[socketId], info); return isNew;}function unsetUser(socketId) { if (users[socketId]) { delete users[socketId]; userCount--; }}效果預覽

至此，就實現了一個最簡單的一個多人線上web對話的程式。

改進點

很明顯，作為一個聊天工具，還缺少很多的功能或者模組，距離完整的系統相當遙遠，比如

自定義表情傳送圖片、視訊、文章連結等安全過濾群組功能桌面、手機客戶端的支援...

如果大家有興趣，可以留言，我會在後續內容中考慮。