零基础学习node+express搭建聊天室

2023-09-04 05:44:45

深入解析搭建聊天室的过程

1. Node.js服务器的创建

首先，我们需要创建一个Node.js服务器来处理HTTP请求。我们将使用流行的框架Express.js，它可以让我们轻松地设置路由和处理HTTP请求。

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

这段代码创建了一个简单的Node.js服务器，当用户访问localhost:3000时，服务器将返回“Hello World!”作为响应。

2. 安装和使用Express.js

接下来，我们需要安装和使用Express.js。Express.js是一个流行的Node.js框架，它可以让我们轻松地设置路由和处理HTTP请求。

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

这段代码创建了一个简单的Node.js服务器，当用户访问localhost:3000时，服务器将返回“Hello World!”作为响应。

3. 配置Socket.IO

现在，我们需要配置Socket.IO来实现实时聊天功能。Socket.IO是一个JavaScript库，它可以让我们在浏览器和服务器之间建立双向通信。

const socketIO = require('socket.io');

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

这段代码在Node.js服务器上配置了Socket.IO。当有用户连接到服务器时，服务器将记录此连接，并监听“chat message”事件。当用户发送“chat message”事件时，服务器将广播此消息给所有连接的客户端。

4. 创建客户端代码

最后，我们需要创建客户端代码来连接到服务器并发送聊天消息。

<!DOCTYPE html>
<html>
<head>
  
  <script src="socket.io.js"></script>
</head>
<body>
  <input type="text" id="message" />
  <button id="send">Send</button>

  <script>
    const socket = io();

    document.getElementById('send').addEventListener('click', () => {
      const message = document.getElementById('message').value;
      socket.emit('chat message', message);
    });

    socket.on('chat message', (msg) => {
      console.log(msg);
    });
  </script>
</body>
</html>