Vue可以使用WebSocket实现实时获取后端推送的数据。

1.在Vue项目中安装WebSocket库

可以使用npm或yarn安装WebSocket库:


npm install --save websocket

2.创建WebSocket连接

在Vue组件中创建WebSocket连接,连接到后端WebSocket服务器,代码如下:


mounted() {
    this.websocket = new WebSocket('ws://localhost:8080/ws');
    this.websocket.onmessage = this.onMessage;
},
methods: {
    onMessage(event) {
        console.log(event.data);
    }
}

上面的代码中,使用WebSocket连接到后端WebSocket服务器,通过监听onmessage事件,实时获取从后端推送来的数据。

3.发送WebSocket数据

在Vue组件中,可以使用WebSocket发送数据到后端WebSocket服务器,代码如下:


this.websocket.send('hellow world')

上面的代码可以发送字符串“hellow world”到后端WebSocket服务器。

4.关闭WebSocket连接

当不需要WebSocket连接时,可以使用WebSocket的close方法关闭连接,代码如下:


this.websocket.close()

实时获取后端推送的数据便是如此,希望对你有所帮助!

Logo

前往低代码交流专区

更多推荐