一个用Node.JS做的聊天程序，有图有真相，是不是有点QQ的感觉。

一个用Node.JS做的聊天程序，有图有真相，是不是有点QQ的感觉。

网站还在不断完善更新中，欢迎大家吐槽，有喜欢的可以支持下！地址是：www.buluoquan.com,临客可以通过首页右侧的在线客服体验。部落圈期待着你的光临。
QQ.jpg QQ图片20161123135306.png


18 回复

一个用Node.JS做的聊天程序，有图有真相，是不是有点QQ的感觉？

大家好！今天给大家展示一个用Node.js开发的简单聊天程序。虽然它可能没有QQ那么复杂和强大，但基本功能已经具备了。大家可以体验一下，并提出宝贵的意见。

技术栈

  • Node.js：后端运行环境
  • Socket.IO：实时通信库
  • Express：Web应用框架
  • HTML/CSS/JavaScript：前端界面

示例代码

后端（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.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

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

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

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

server.listen(3000, () => {
    console.log('Listening on port 3000');
});
前端（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易聊天室</title>
    <style>
        #messages { height: 300px; overflow-y: scroll; }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input id="m" autocomplete="off" /><button onclick="sendMessage()">发送</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();

        function sendMessage() {
            var message = document.getElementById('m').value;
            socket.emit('chat message', message);
            document.getElementById('m').value = '';
        }

        socket.on('chat message', function(msg) {
            var item = document.createElement('li');
            item.textContent = msg;
            document.getElementById('messages').appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>
</body>
</html>

使用说明

  1. 确保你已经安装了Node.js和npm。
  2. 克隆或复制上述代码到你的项目文件夹。
  3. 在命令行中运行 npm install express socket.io 安装依赖。
  4. 运行 node server.js 启动服务器。
  5. 打开浏览器访问 http://localhost:3000，即可体验聊天室功能。

截图

QQ.jpg

QQ图片20161123135306.png

结语

这是一个非常基础的聊天程序，还有很多可以改进的地方，比如用户登录、消息持久化等。希望大家能够提供宝贵的反馈，帮助我们不断进步！

希望这段内容对你有所帮助！如果有任何问题，请随时留言交流。


如果想申请自己的客服系统，可以注册，比如你申请的域名是baidu.com,那么生成的在线客服链接就是http://www.buluoquan.com:3000/qq/baiducom; 对于个人用户 比如你申请的昵称是：ViVi，那么你生成的聊天链接就是 http://www.buluoquan.com:3000/qq/ViVi 那么你可以告诉你朋友生成的 http://www.buluoquan.com:3000/qq/ViVi
这个地址，只要你们同时访问，就可以彼此聊天了。

请问你这用什么服务器发布的啊?

还能再丑点么

win 7

恩 很多地方都还没完善

win7 ?你是用自己的电脑做服务器的？

不是，云端服务器

很不错，期待代码开源到github上哈

balloon就挺好的

为什么不做响应式的？

什么意思？

不错

欢迎提好的建议。

如有技术需求请加QQ群33102743，联系程序开发人员探讨！

压根没过滤。。。。

博客求空降， http://blog.gaoqixhb.com

要实现一个简单的基于Node.js的聊天程序，可以使用WebSocket来实现实时通信。这里是一个基本的示例，展示如何创建一个简单的聊天应用，并提供了一些简短的代码示例。

示例代码

首先，确保安装了必要的依赖包：

npm install express ws

然后，创建一个简单的服务器端代码（server.js）：

const express = require('express');
const WebSocket = require('ws');
const http = require('http');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

app.get('/', (req, res) => {
  res.send(`
    <h1>简单聊天室</h1>
    <input id="name" placeholder="请输入您的名字">
    <textarea id="message" rows="10" cols="50"></textarea>
    <button onclick="sendMessage()">发送</button>
    <div id="chat-box" style="border: 1px solid black; height: 300px; overflow-y: scroll;"></div>

    <script>
      const socket = new WebSocket('ws://' + window.location.host);

      function sendMessage() {
        const name = document.getElementById('name').value;
        const message = document.getElementById('message').value;
        socket.send(JSON.stringify({ name, message }));
        document.getElementById('message').value = '';
      }

      socket.onmessage = function(event) {
        const data = JSON.parse(event.data);
        const chatBox = document.getElementById('chat-box');
        chatBox.innerHTML += `<p><strong>${data.name}:</strong> ${data.message}</p>`;
        chatBox.scrollTop = chatBox.scrollHeight;
      };
    </script>
  `);
});

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

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

这段代码创建了一个简单的Web服务器，该服务器使用Express处理静态文件请求，并使用WebSocket处理实时消息传递。客户端通过JavaScript与WebSocket连接并发送/接收消息。

解释

  • Express: 用于设置静态文件服务。
  • WebSocket: 用于实现客户端和服务器之间的实时通信。
  • HTML & JavaScript: 客户端通过WebSocket与服务器交互，显示聊天消息，并允许用户输入消息。

运行

运行node server.js启动服务器。访问http://localhost:3000即可看到一个简单的聊天界面。打开多个浏览器窗口或标签页可以测试多用户之间的聊天功能。

这样就实现了一个非常基础但功能完整的聊天室。

回到顶部