NodeJS写的WebQQ

ionicwang 1楼

NodeJS写的WebQQ

发布一个自己写的WebQQ

在这个项目中，我实现了一个基于Node.js的WebQQ应用。该项目使用了Node.js作为后端服务器，Socket.io来处理实时通信，并且使用MySQL数据库来存储用户信息和聊天记录。

环境

Node.js: 用于构建服务器端逻辑。
Socket.io: 实现WebSocket通信，支持实时聊天功能。
MySQL: 用于存储用户数据和聊天记录。

功能描述

用户注册和登录
实时聊天功能
聊天记录保存到数据库
在线状态显示

源码下载

你可以从以下链接下载项目的源码：点击这里下载

示例代码

下面是一个简单的示例代码，展示了如何使用Node.js和Socket.io创建一个基本的聊天室：

// 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.on('chat message', (msg) => {
        io.emit('chat message', msg); // 广播消息给所有连接的客户端
    });

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

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

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WebQQ Chat Room</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #messages { height: 400px; overflow-y: scroll; }
    </style>
</head>
<body>
    <div id="messages"></div>
    <input id="m" autocomplete="off" /><button onclick="sendMessage()">Send</button>

    <script>
        const socket = io();

        function appendMessage(msg) {
            $('#messages').append(`<p>${msg}</p>`);
        }

        socket.on('chat message', function(msg) {
            appendMessage(msg);
        });

        function sendMessage() {
            const message = $('#m').val();
            socket.emit('chat message', message);
            $('#m').val('');
        }
    </script>
</body>
</html>

结语

这个简单的WebQQ应用展示了如何使用Node.js和Socket.io来构建一个实时聊天系统。如果你对这个项目感兴趣或有任何问题，请随时联系我。

联系方式

如果你对这个项目感兴趣，或者有任何问题，可以联系我：

QQ: 55915577

希望这个项目对你有所帮助！

sinazl 2楼作者

感觉载入速度很慢，你那边是啥网络

vueper 3楼

是慢，香港的vps~

songsunli 4楼

为啥点击登录的时候都不发请求的，而且一直提示用户名密码错误。。。。。。难道。。。。。。就是个登录界面？

itying888 5楼

额，好吧，我发现了，要重新注册下“qq”。

phonegap100 6楼

顶一下请问github上有源码吗

yibo5220 7楼

我只是想借鉴一下这个界面我也在做一个聊天工具的

caililin 8楼

什么东西都写扣扣，怎么看着都像是钓鱼网站啊。。。

caililin 9楼

我靠。没有记住密码吧。。我打了好几遍。才发现要注册。。。

yibo5220 10楼

运用得不错，想学习下，能分享吗？

htzhanglong 11楼

没有实现拖动的话是挺可惜的啊.

sinazl 12楼作者

不错就是不能加好友，在线的点击没反应

bupafengyu 13楼

UI真心不错~

zlyuanteng 14楼

聊天窗口有拖动

phonegap100 15楼

可以加好友只能加在线的那边通过你的请求就可以了

h691938207 16楼

源码放出来了自己下载下吧

htzhanglong 17楼

貌似和webqq木有啥子关系- -

phonegap100 18楼

和node也木有啥子关系

yibo5220 19楼

man

h691938207 20楼

这是咋做的这么像呢？

itying888 21楼

源码需要怎么运行能不能截几个图看看啊！！打开html什么都没有

yuanlaile 22楼

网站打不开啊？

yibo5220 23楼

打不开唉

itying888 24楼

你是不是把你的域名服务器给关了啊，打不开了。不过我有下源码，在自己的机器上有看到ui,真心不错。对了，你那个mysql数据库能共享吗，我这边注册不了，不知道你数据库怎么设计的，email：1092017732@QQ.COM

vueper 25楼

vps没续费了，所以关闭了

vueper 26楼

数据库好像是在源码里的，mysql的数据库需要用phpmyadmin导入下

wuwangju 27楼

需要导入下mysql的数据库，然后再运行下服务端就行了

yuanlaile 28楼

根据你提供的信息，用户希望了解如何使用Node.js、Socket.io和MySQL来编写一个WebQQ应用。以下是一个简单的示例代码，展示如何搭建一个基本的WebQQ应用。

示例代码

1. 安装依赖

首先确保安装了所需的Node.js包：

npm install express socket.io mysql

2. 服务器端代码（server.js）

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

// 创建数据库连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'webqq'
});

connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL database!');
});

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.on('login', (data) => {
    // 查询用户是否在线
    const query = `SELECT * FROM users WHERE username='${data.username}' AND status='online'`;
    connection.query(query, (err, results) => {
      if (err) throw err;

      if (results.length > 0) {
        socket.emit('login', { status: 'failed', message: 'User already online.' });
      } else {
        socket.broadcast.emit('newUser', data);
        socket.emit('login', { status: 'success', message: 'Logged in successfully.' });
      }
    });
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected');
    // 更新用户的在线状态
    const query = `UPDATE users SET status='offline' WHERE username='${socket.user}'`;
    connection.query(query, (err, results) => {
      if (err) throw err;
    });
  });
});

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

3. 客户端代码（index.html）

<!DOCTYPE html>
<html>
<head>
  <title>WebQQ</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <input type="text" id="username" placeholder="Username">
  <button onclick="login()">Login</button>

  <script>
    const socket = io();

    function login() {
      const username = document.getElementById('username').value;
      socket.emit('login', { username });
      socket.user = username;
    }

    socket.on('login', (data) => {
      if (data.status === 'success') {
        alert(data.message);
      } else {
        alert(data.message);
      }
    });

    socket.on('newUser', (data) => {
      alert(`${data.username} has joined.`);
    });
  </script>
</body>
</html>

说明

服务器端：创建了一个简单的HTTP服务器，并使用Socket.io处理WebSocket连接。通过MySQL查询用户状态，并处理用户登录和登出事件。
客户端：提供了一个简单的HTML页面，允许用户输入用户名并进行登录。

这个示例代码展示了如何实现一个基本的WebQQ应用。实际生产环境中，需要考虑更多的安全性和健壮性问题，例如防止SQL注入、加密通信等。