从零开始用Nodejs搭建web聊天室

从零开始用Nodejs搭建web聊天室

有人和我一样，看到的图片都是挂的吗？

10 回复

当然可以！以下是如何使用 Node.js 搭建一个简单的 Web 聊天室的教程。我们将使用 Express 和 Socket.IO 来实现前后端的通信。

准备工作

首先确保你已经安装了 Node.js。接下来创建一个新的项目文件夹，并初始化 npm：

mkdir chatroom
cd chatroom
npm init -y

然后安装所需的依赖包：

npm install express socket.io

项目结构

我们的项目结构将非常简单：

chatroom/
├── index.html
├── server.js
└── package.json

前端代码 (index.html)

创建 index.html 文件，并添加基本的 HTML 结构和一些 JavaScript 来连接 WebSocket 并发送消息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Chat Room</title>
    <style>
        #messages { height: 300px; overflow-y: scroll; }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

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

        function sendMessage() {
            const input = document.getElementById('messageInput');
            socket.emit('new_message', input.value);
            input.value = '';
        }

        socket.on('message', data => {
            const messageElement = document.createElement('div');
            messageElement.textContent = data;
            messagesDiv.appendChild(messageElement);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });
    </script>
</body>
</html>

后端代码 (server.js)

创建 server.js 文件，并编写后端逻辑来处理 WebSocket 连接和消息传递：

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

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

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

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

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

运行项目

最后，运行你的 Node.js 服务器：

node server.js

打开浏览器并访问 http://localhost:3000，你应该能够看到一个简单的聊天界面。现在你可以和其他用户（在同一机器上打开多个浏览器标签）进行实时聊天。

总结

以上就是使用 Node.js、Express 和 Socket.IO 构建一个简单的 Web 聊天室的基本步骤。你可以根据需要进一步扩展功能，比如增加用户身份验证、持久化消息存储等。希望这对你有所帮助！


图片全挂+1

图片都看不到，文章的编写者似乎很不负责任。。。。

全挂+1，其实挺想学习一下。作者看到，重发一遍吧。

+1。图片全部当掉

第一次发，图片不知道要怎么才能正常显示。。。。。。

enter image description here

发图片要保留 http://

http://img.my.csdn.net/uploads/201304/11/1365666383_9793.png

以前我也做过聊天室，不过觉得socket.io前后端想要实现一些东西太麻烦，唯一所得就是存储session那里了解多一些。

从零开始用Node.js搭建web聊天室是一个非常有趣且实用的项目。这里我会提供一个简单的实现方案，并附上一些关键代码片段。

技术栈

  • Node.js - 后端服务器
  • Socket.IO - 实时通信
  • Express - 简化HTTP服务器设置
  • HTML/CSS/JavaScript - 前端界面

步骤

  1. 创建项目结构

    chatroom/
├── public/
│   ├── index.html
│   └── script.js
├── server.js
└── package.json

  2. 初始化项目

    npm init -y
npm install express socket.io

  3. 编写服务端代码 (server.js)

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('a user connected');
  
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

  4. 编写客户端代码 (public/index.html 和 public/script.js)

    • index.html

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat Room</title>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

    • script.js

      const socket = io();

const form = document.querySelector('form');
const input = document.getElementById('m');
const ul = document.getElementById('messages');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (input.value) {
    socket.emit('chat message', input.value);
    input.value = '';
  }
});

socket.on('chat message', function(msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  ul.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

运行

node server.js

打开浏览器访问 http://localhost:3000 即可看到聊天室。

这个例子提供了一个基础的聊天室功能，你可以在此基础上增加更多的特性，如用户身份验证、房间管理等。

回到顶部