消息推送系统

在现代互联网应用中，统一的消息推送和用户登录功能是提升用户体验的重要组成部分。本文将通过一个简单的例子展示如何使用WebSocket进行实时消息推送，并结合JSON Web Token（JWT）实现安全的用户登录。

### 系统架构概述

- 前端：React.js

- 后端：Node.js + Express

- 数据库：MongoDB

### 后端代码实现

首先，安装必要的依赖：

        npm install express ws jsonwebtoken mongoose bcryptjs
        

创建`server.js`文件：

        const express = require('express');
        const http = require('http');
        const WebSocket = require('ws');
        const jwt = require('jsonwebtoken');
        const mongoose = require('mongoose');
        const bcrypt = require('bcryptjs');

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

        // 连接数据库
        mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true, useUnifiedTopology: true });

        // 用户模型
        const UserSchema = new mongoose.Schema({
            username: String,
            password: String
        });
        const User = mongoose.model('User', UserSchema);

        // 生成JWT
        function generateToken(user) {
            return jwt.sign({ id: user._id }, 'secret_key', { expiresIn: '1h' });
        }

        // 登录接口
        app.post('/login', async (req, res) => {
            const { username, password } = req.body;
            const user = await User.findOne({ username });
            if (!user || !await bcrypt.compare(password, user.password)) {
                return res.status(401).send('Invalid credentials');
            }
            const token = generateToken(user);
            res.json({ token });
        });

        // WebSocket连接处理
        wss.on('connection', async (ws) => {
            ws.on('message', async (message) => {
                const data = JSON.parse(message);
                if (data.type === 'subscribe') {
                    ws.subscribeId = data.userId;
                    console.log(`User ${data.userId} connected.`);
                }
            });

            ws.on('close', () => {
                console.log(`User ${ws.subscribeId} disconnected.`);
            });
        });

        // 消息推送
        setInterval(() => {
            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN && client.subscribeId) {
                    client.send(JSON.stringify({ message: 'Hello World!' }));
                }
            });
        }, 5000);

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

### 前端代码实现

使用React创建一个简单的登录页面：

        import React, { useState } from 'react';
        import axios from 'axios';

        function App() {
            const [username, setUsername] = useState('');
            const [password, setPassword] = useState('');

            const handleLogin = async () => {
                try {
                    const response = await axios.post('http://localhost:3000/login', {
                        username,
                        password
                    });
                    console.log(response.data.token);
                } catch (error) {
                    console.error(error);
                }
            };

            return (
                

                     setUsername(e.target.value)} placeholder="Username" />
                     setPassword(e.target.value)} placeholder="Password" />
                    Login
                
            );
        }

        export default App;
        

### 总结

本系统展示了如何通过WebSocket实现消息推送，并利用JWT确保用户身份的安全性。这是一套轻量级且高效的解决方案，适合中小型项目。

]]>