使用 Node.js 和 Socket.IO 创建实时聊天应用:步骤指南

本指南将带您逐步创建简单的实时聊天应用程序,使用 Node.js 和 Socket.IO。

1. 创建项目目录

首先,选择一个目录来存放您的项目文件。

2. 初始化项目

在命令行中进入该目录,运行 'npm init' 创建 'package.json' 文件。

3. 安装依赖包

npm install express socket.io --save

4. 创建服务器文件 (server.js)

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

const port = 3000;

// 处理 HTTP 请求 (可选)
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('用户连接');
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

http.listen(port, () => {
  console.log(`服务器已启动,端口 ${port}`);
});

5. 创建 HTML 文件 (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>实时聊天</title>
  <script src='/socket.io/socket.io.js'></script>
  <script>
    const socket = io();
    const messageForm = document.getElementById('messageForm');
    const inputMessage = document.getElementById('inputMessage');
    const messages = document.getElementById('messages');

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

    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
    });
  </script>
</head>
<body>
  <h1>实时聊天</h1>
  <ul id='messages'></ul>
  <form id='messageForm'>
    <input type='text' id='inputMessage' autocomplete='off'>
    <button>发送</button>
  </form>
</body>
</html>

6. 运行服务器

node server.js

7. 测试应用

在浏览器中打开 'http://localhost:3000',使用按钮测试网页使用次数提示功能。

注意

  • 以上代码仅供参考,您可以根据您的需求进行修改。
  • 为了安全起见,请不要在生产环境中使用此代码,并确保您的代码符合安全规范。
  • Socket.IO 提供了更多功能,例如房间、身份验证等,您可以根据您的需要进行扩展。
使用 Node.js 和 Socket.IO 创建实时聊天应用:步骤指南

原文地址: https://www.cveoy.top/t/topic/mvqr 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录