websocket数据库数据变化实时推送前端

最近项目上有需要,先写了一个demo用于记录和研究websocket,代码有些是借鉴了其他前辈的代码,有些是自己的,还包括一些踩坑
主要用于需要后端想前端进行数据库变化时推送刷新页面通知。
WebSocketServlet
这个主要用于配置方法以及在方法内轮询线程查询数据库

import com.service.IdentifyRecordService;
import org.springframework.stereotype.Component;

import javax.annotation.Resource;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

//在相对路径中发布端点websocket
@ServerEndpoint("/websocket")
@Component
public class WebSocketServlet {
   

    MyThread thread1=new MyThread();

    Thread thread=new Thread(thread1);

    @Resource
    private IdentifyRecordService identifyRecordService;

    //用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServlet> webSocketSet = new CopyOnWriteArraySet<WebSocketServlet>();
    private  javax.websocket.Session session=null;

    /**
     * @ClassName: onOpen
     * @Description: 开启连接的操作
     */
    @OnOpen
    public void onOpen(Session session) throws IOException{
   
        this.session=session;
        webSocketSet.add(this);
        System.out.println(webSocketSet);
        //开启一个线程对数据库中的数据进行轮询
        thread.start();

    }

    /**
     * @ClassName: onClose
     * @Description: 连接关闭的操作
     */
    @OnClose
    public void onClose(){
   
        thread1.stopMe();
        webSocketSet.remove(this);
    
  • 1
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要使用WebSocket实现数据库更新时前端页面的实时刷新,你可以按照以下步骤进行操作: 1. 在后端,使用WebSocket协议与前端建立连接。你可以使用一些流行的WebSocket库,如Socket.io(Node.js)或Tornado(Python)来简化这个过程。 2. 在前端,使用JavaScript的WebSocket API与后端建立连接。可以使用以下代码示例: ```javascript const socket = new WebSocket('ws://your-server-url'); socket.onopen = () => { console.log('WebSocket连接已建立'); }; socket.onmessage = (event) => { console.log('收到消息:', event.data); // 在收到消息时执行相应的操作,如更新页面内容 }; socket.onclose = () => { console.log('WebSocket连接已关闭'); }; ``` 3. 在后端,监听数据库的更新操作。当数据库发生更新时,通过WebSocket前端发送消息。具体实现方式取决于你使用的数据库后端语言。 例如,如果你使用Node.js和MongoDB,可以使用MongoDB的Change Streams功能来监听数据库变化,并通过WebSocket发送消息给前端。以下是一个简单的示例: ```javascript const { MongoClient } = require('mongodb'); const WebSocket = require('ws'); const url = 'mongodb://localhost:27017'; const dbName = 'your-database-name'; const collectionName = 'your-collection-name'; const wss = new WebSocket.Server({ port: 8080 }); (async function () { const client = await MongoClient.connect(url, { useUnifiedTopology: true }); const db = client.db(dbName); const collection = db.collection(collectionName); const changeStream = collection.watch(); changeStream.on('change', (change) => { const message = JSON.stringify(change); wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(message); // 向前端发送更新消息 } }); }); })(); ``` 这样,当数据库中的数据发生变化时,后端会将变化信息通过WebSocket发送给前端前端页面可以根据接收到的消息来实时更新内容。 请注意,以上代码只是一个简单的示例,实际上,你需要根据你的具体需求和技术栈进行相应的配置和开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值