WebSocket实现数据库更新时前端页面刷新

实现WebSocket实时刷新前端页面的步骤如下：

前端客户端通过WebSocket与服务器端建立连接。

在前端，可以使用WebSocket API来建立与服务器端的连接。例如：

const ws = new WebSocket('ws://localhost:3000');

服务端通过WebSocket与数据库建立连接。

服务端需要监听客户端的WebSocket连接请求，并在成功建立连接后，再与数据库建立连接。例如：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', function connection(ws) {
  // 建立连接之后，与数据库建立连接，例如使用mysql的连接池
  const mysql = require('mysql');
  const pool  = mysql.createPool({
    connectionLimit : 10,
    host            : 'localhost',
    user            : 'root',
    password        : 'password',
    database        : 'database'
  });

  // 监听WebSocket消息
  ws.on('message', function incoming(message) {
    // 处理消息，例如更新数据库操作
    pool.query('UPDATE table SET column=value WHERE id = ?', [message], function (error, results, fields) {
      if (error) throw error;
      console.log('Updated ' + results.affectedRows + ' rows');
    });

    // 将更新通知所有连接的客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send('update'); // 通知客户端刷新页面
      }
    });
  });
});

前端客户端通过WebSocket监听服务端的消息，以实现实时刷新前端页面。

客户端需要监听服务端发送的消息，并在收到消息时刷新页面。例如：

const ws = new WebSocket('ws://localhost:3000');

ws.onmessage = function(event) {
  if (event.data === 'update') {
    // 收到更新通知，刷新页面
    window.location.reload();
  }
};

示例1：

假设前端页面有一个表格，用于显示数据库中的数据，这个表格是通过AJAX从后端获取的。当数据库中的数据发生变化时，需要实时更新表格中的数据。

前端代码：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket实时更新页面示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        items: []
      },
      created: function() {
        // 通过AJAX获取数据
        this.fetchData();

        // 建立WebSocket连接
        const ws = new WebSocket('ws://localhost:3000');

        // 监听WebSocket消息
        ws.onmessage = function(event) {
          if (event.data === 'update') {
            // 收到更新通知，重新获取数据
            this.fetchData();
          }
        }.bind(this); // 注意这里bind(this)是为了让回调函数中的this指向Vue实例对象
      },
      methods: {
        fetchData: function() {
          // 发送AJAX请求
          fetch('/data')
            .then(response => response.json())
            .then(data => {
              this.items = data;
            });
        }
      }
    });
  </script>
</head>
<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

后端代码：

const express = require('express');
const app = express();
const http = require('http').Server(app);
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server: http });

// 模拟数据库中的数据
const items = [{ name: 'Alice', age: 20 }, { name: 'Bob', age: 22 }, { name: 'Charlie', age: 25 }];

// 提供获取数据的API
app.get('/data', function(req, res) {
  res.json(items);
});

// 监听WebSocket连接
wss.on('connection', function connection(ws) {
  console.log('Client connected.');

  // 监听WebSocket消息（这里假设收到消息时需要修改数据库中的数据）
  ws.on('message', function incoming(message) {
    console.log('Received message:', message);
    // 修改数据（这里省略了更新数据库的代码）
    items.push({ name: 'David', age: 28 });
    // 将更新通知所有连接的客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send('update'); // 通知客户端刷新页面
      }
    });
  });
});

http.listen(3000, function() {
  console.log('Server listening on http://localhost:3000');
});

示例2：

假设前端页面有一个留言板功能，当用户在留言板中发表新留言时，需要实时更新页面中的留言列表。

前端代码：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket实时更新页面示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        messages: []
      },
      created: function() {
        // 建立WebSocket连接
        const ws = new WebSocket('ws://localhost:3000');

        // 监听WebSocket消息
        ws.onmessage = function(event) {
          if (event.data === 'update') {
            // 收到更新通知，重新获取留言列表
            this.fetchMessages();
          } else {
            // 收到新留言
            const message = JSON.parse(event.data);
            this.messages.unshift(message); // 将新留言插入到列表头部
          }
        }.bind(this); // 注意这里bind(this)是为了让回调函数中的this指向Vue实例对象

        // 获取留言列表
        this.fetchMessages();
      },
      methods: {
        fetchMessages: function() {
          // 发送AJAX请求
          fetch('/messages')
            .then(response => response.json())
            .then(data => {
              this.messages = data;
            });
        },
        postMessage: function() {
          const message = { username: this.username, content: this.content };
          // 发送WebSocket消息
          const ws = new WebSocket('ws://localhost:3000');
          ws.onopen = function() {
            ws.send(JSON.stringify(message));
          };
        }
      }
    });
  </script>
</head>
<body>
  <div id="app">
    <div>
      <input v-model="username" placeholder="请输入用户名">
      <textarea v-model="content" placeholder="请输入留言内容"></textarea>
      <button @click="postMessage">发表留言</button>
    </div>
    <ul>
      <li v-for="message in messages">
        <strong>{{ message.username }}</strong>：{{ message.content }}
      </li>
    </ul>
  </div>
</body>
</html>

后端代码：

const express = require('express');
const app = express();
const http = require('http').Server(app);
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server: http });

// 模拟数据库中的留言
const messages = [
  { username: 'Alice', content: 'Hello' },
  { username: 'Bob', content: 'Hi, Alice' }
];

// 提供获取留言列表的API
app.get('/messages', function(req, res) {
  res.json(messages);
});

// 监听WebSocket连接
wss.on('connection', function connection(ws) {
  console.log('Client connected.');

  // 发送留言列表
  ws.send(JSON.stringify(messages));

  // 监听WebSocket消息（这里假设收到消息时需要添加新留言到数据库中）
  ws.on('message', function incoming(message) {
    console.log('Received message:', message);
    // 添加新留言（这里省略了更新数据库的代码）
    const newMessage = { username: 'Charlie', content: message };
    messages.push(newMessage);
    // 将更新通知所有连接的客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(newMessage)); // 通知客户端添加新留言
        client.send('update'); // 通知客户端刷新页面
      }
    });
  });
});

http.listen(3000, function() {
  console.log('Server listening on http://localhost:3000');
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：WebSocket实现数据库更新时前端页面刷新 - Python技术站

WebSocket实现数据库更新时前端页面刷新

相关文章