vue如何通过webSocket实时预览推送的PDF？

业务需求：“设备工控机需要实时展示最新操作指引手册，需要根据webSocket实时动态推送更新预览最新PDF手册”； 先看实现的效果：

预览PDF服务搭建，请参考这篇文章

实现代码如下：

<template>
	<view>
		<cu-custom :bgColor="NavBarColor" :reLaunch="true" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">工站SOP</block>
		</cu-custom>
		<view style="overflow: hidden;">
			<!-- <web-view :src="allUrl"></web-view> -->
			<iframe :src="allUrl" width="100%" height="1080px;" />
		</view>

	</view>
</template>

<script>
	import {
		Base64
	} from './base64.min.js';
	export default {
		data() {
			return {
				allUrl: '',
				viewerUrl:"http://192.168.1.253:8012/onlinePreview?url=",
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBarColor: this.NavBarColor,
				urlwebSocket:"http://192.168.0.245/1.pdf",//webSocket返回的URL
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false
			}
		},
		onLoad(params) {
			this.getLoginPdfUrl();
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			this.connectSocketInit();
			// 解析预览PDF
			this.getList();
		},
		// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
		beforeDestroy() {
			this.closeSocket();
		},
		methods:{
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				let id = uni.getStorageSync("login_user_info").id;//登录人ID
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					// url: "ws://192.168.1.253:8083/mes-boot" + "/websocket/" + id,
					success(data) {
						console.log("websocket连接成功",data);
					},
				});
 
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.socketTask.send({
						data: "uni-app发送一条消息",
						async success() {
							console.log("消息发送成功");
						},
					});
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容：" + res.data);
						let urlK = res.data || "";
						this.allUrl=this.viewerUrl+encodeURIComponent(Base64.encode(urlK));
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			// 获取登录返回的PDF
			getLoginPdfUrl(){
				let loginPdfUrl = uni.getStorageSync("pdfUrl");	
                          this.allUrl=this.viewerUrl+encodeURIComponent(Base64.encode(loginPdfUrl));
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			clickRequest() {
				if (this.is_open_socket) {
					// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
					this.socketTask.send({
						data: "请求一次发送一次message",
						async success() {
							console.log("消息发送成功");
						},
					});
				}
			},
			getList(){
				let urlK = this.urlwebSocket;
                          this.allUrl=this.viewerUrl+encodeURIComponent(Base64.encode(urlK));
				let that = this;
				let height = 0;
				uni.getSystemInfo({
					success: (sysinfo) => {
						height = sysinfo.windowHeight;
					}
				});
			}
		}
	}
</script>

<style>
</style>