vue+websocket实现数据实时推送以及本地测试

最新推荐文章于 2025-10-13 09:25:22 发布

原创

最新推荐文章于 2025-10-13 09:25:22 发布 · 7.3k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #vue #javascript #前端

本文探讨了WebSocket在Vue中的应用，对比了Ajax轮询的不足，详细介绍了WebSocket原理及其实现方式。通过Vue和WebSocket结合，实现了客户端与服务器间的全双工通信，提高了数据实时性。

文章目录

websocket + vue 实现实时通信

websocket + vue 实现实时通信

websocket原理

目前，我们有许多数据需要实时获取，由于数据不断改变，之前我使用的方法是通过 setInterval去定时请求，但是由于服务器请求过来的数据需要一定的时间，导致一个请求还没有完成，定时器又开始了另外一个请求，导致请求堆积，然后这个请求就一直处于pending状态（可能就挂掉了），好吧，既然这种不行，那就换一种方法，采用了setTimeout在当前请求数据返回后，再发起新的请求，但是，实时性不是那么强了，最后再采取的websocket。

在这里插入图片描述

上图可以对比一下两个请求之间的区别，ajax轮循使用的是一问一答，每次建立请求后发送或者接收数据后，连接通道就自动关闭了，这样轮询次数多了，比较浪费带宽资源。

ws是H5提供的在单个TCP协议上进行的全双工协议，就是服务器和客户端可以互相进行通信。ws只需要在完成一次握手以后，两者间久可建立持久的连接，并进行双向数据传输。

vue+websocket 客户端的实现

	mounted(){
   
    
		this.initWebSocket(); //页面渲染的时候，对ws进行初始化
	},
		methods:{
   
   
			initWebSocket () {
   
    
				this.websock = new WebSocket('ws://localhost:8081');//这个连接ws://固定，后面的根据自己的IP和端口进行改变，我设置监听的就是8081
				this.websock.onmessage = this.websocketonmessage
				this.websock.onerror = this.websocketonerror
				this.websock.onopen = this.websocketonopen
				this.websock.onclose =