零基础直达高手！打造极简聊天室的捷径

2023-07-20 17:26:08

解锁实时沟通的力量：构建简约版聊天室

在当今数字化的瞬息万变中，实时沟通已成为不可或缺的关键要素。从社交媒体到协作工具，人们渴望即时连接，无缝共享信息。对于雄心勃勃的开发人员来说，构建一个简约版的聊天室是一个在实时通信领域大显身手的绝佳起点。

结识 express.js 和 socket.io

打造聊天室的征途中，express.js 和 socket.io 将成为你的得力助手。express.js 是一个轻量级的 Node.js 框架，可简化 Web 应用程序的构建。另一方面，socket.io 作为一个实时通信库，赋予你的应用程序双向通信的能力，从而实现实时消息传递。

一步步搭建简约版聊天室

1. 安装必备组件

首先，安装 express.js 和 socket.io：

npm install express socket.io

2. 创建服务器端

利用 express.js 建立服务器端：

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('新用户加入');
  socket.on('message', (msg) => {
    io.emit('message', msg);
  });
});

server.listen(3000);

3. 创建客户端

采用 HTML、CSS 和 JavaScript 构建客户端：

<!DOCTYPE html>
<html>
<head>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const msg = input.value;
      socket.emit('message', msg);
      input.value = '';
    });

    socket.on('message', (msg) => {
      const div = document.createElement('div');
      div.textContent = msg;
      document.getElementById('messages').appendChild(div);
    });
  </script>
</head>
<body>
  <form id="form">
    <input id="input" type="text">
    <button type="submit">发送</button>
  </form>
  <div id="messages"></div>
</body>
</html>