用Nodejs的express和socket.io 实现数据实时更新的功能

用Nodejs的express和socket.io 实现数据实时更新的功能

RT： 现在想搞个数据实时更新的小例子， 我现在有一个事件叫 getList 就是很简单的一个查询 然后把数据document.wrilte 出来。我正在看书中…先发个帖，请各位前辈 贴个例子出来。 现在我有几个问题：1.socket.io怎么搭载在express建立的服务器上 2.socket.io怎么监听事件

4 回复

当然可以！下面是如何使用Node.js中的Express和Socket.io实现数据实时更新功能的详细步骤及示例代码。

安装依赖

首先，你需要安装express和socket.io。如果你还没有安装它们，可以通过npm进行安装：

npm install express socket.io

示例代码

接下来是具体的代码实现：

1. 创建一个基本的Express应用

创建一个名为app.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'));

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

// 监听事件
io.on('connection', (socket) => {
    console.log('A user connected');
    
    // 当客户端发送getList事件时
    socket.on('getList', () => {
        // 假设这是从数据库获取的数据
        const data = [
            { id: 1, name: 'Alice' },
            { id: 2, name: 'Bob' }
        ];
        
        // 发送数据给客户端
        socket.emit('dataUpdated', data);
    });

    // 当客户端断开连接时
    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

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

2. 创建HTML页面

在项目目录中创建一个名为public的文件夹，并在其中创建一个名为index.html的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-time Data Update Example</title>
</head>
<body>
    <h1>Data List</h1>
    <ul id="data-list"></ul>

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

        // 当页面加载完成后
        window.onload = function() {
            // 连接后发送getList事件
            socket.emit('getList');

            // 监听dataUpdated事件
            socket.on('dataUpdated', (data) => {
                const dataList = document.getElementById('data-list');
                dataList.innerHTML = ''; // 清空列表
                data.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = `${item.id}: ${item.name}`;
                    dataList.appendChild(li);
                });
            });
        };
    </script>
</body>
</html>

解释

  1. Express应用：我们创建了一个基本的Express应用，并通过http.createServer方法创建了一个HTTP服务器。然后，我们使用socketIo(server)初始化了Socket.io。

  2. 静态文件服务：通过app.use(express.static('public'))，我们将public文件夹设置为静态资源目录，这样客户端可以直接访问HTML和其他静态文件。

  3. 事件监听：在io.on('connection')中，我们监听了客户端的连接事件。当客户端连接时，我们监听getList事件，并在收到该事件时发送包含数据的dataUpdated事件。

  4. HTML页面：在HTML页面中，我们通过<script>标签引入了Socket.io库，并在页面加载完成后发送getList事件。当接收到dataUpdated事件时，我们更新页面上的数据列表。

通过这种方式，我们可以实现实时的数据更新功能。希望这对你有帮助！


先看看socket.io的文档吧，讲的很详细的 https://github.com/Automattic/socket.io

怎么结合在github的README上写了 https://github.com/Automattic/socket.io 监听事件 就是调用on(‘xxx’,function(){});

要在Express应用中使用Socket.IO实现数据实时更新功能，可以按照以下步骤操作。首先，你需要确保已经安装了必要的依赖包，即express和socket.io。你可以通过npm安装它们：

npm install express socket.io

接下来是创建一个简单的Express应用，并集成Socket.IO以实现实时通信。

示例代码

server.js

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

// 创建Express应用实例
const app = express();

// 创建HTTP服务器，并将Express应用实例传递给它
const server = http.createServer(app);

// 将HTTP服务器传递给Socket.IO，这样它就可以监听HTTP连接
const io = socketIo(server);

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

// 监听客户端发起的getList事件
io.on('connection', (socket) => {
    console.log('A user connected:', socket.id);

    // 当接收到getList事件时触发
    socket.on('getList', () => {
        console.log('Received getList event from client');

        // 假设这里有一个模拟的数据获取函数
        const data = [
            {id: 1, name: 'Alice'},
            {id: 2, name: 'Bob'}
        ];

        // 使用emit方法向客户端发送数据
        socket.emit('dataUpdate', data);
    });

    // 当客户端断开连接时
    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real-time Data Update</title>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();

    document.getElementById('getListButton').addEventListener('click', () => {
        socket.emit('getList'); // 向服务器发送getList事件
    });

    socket.on('dataUpdate', (data) => {
        console.log(data); // 在控制台输出接收到的数据
        document.getElementById('output').innerHTML = JSON.stringify(data, null, 2);
    });
</script>
</head>
<body>
<button id="getListButton">Get List</button>
<pre id="output"></pre>
</body>
</html>

解释

  1. 服务器端配置：我们创建了一个Express应用，并将其与一个HTTP服务器关联。然后，我们初始化了Socket.IO，让它监听HTTP服务器上的连接。当客户端连接到服务器时，我们设置了监听getList事件的处理程序，该处理程序模拟从数据库获取数据并发送回客户端。

  2. 客户端配置：客户端加载Socket.IO库，并在按钮点击时发送getList事件给服务器。一旦接收到dataUpdate事件，它将数据显示在页面上。

  3. 通信：socket.emit()用于发送事件和数据到服务器或客户端；socket.on()用于监听特定事件并在事件发生时执行相应的回调函数。

这个例子展示了如何使用Socket.IO和Express构建一个基本的实时数据更新应用。

回到顶部