nuxt3 阿里云直播播放器以及webSocket聊天室

<!-- 录播课程详情 -->
<template>
	<div class="AsWhole">
		<p class="MattP3st" id="J_prismPlayer"></p>
	</div>
</template>
<script>
	let player = null,
		socket = null,
		StopChatting = null // player//播放器 WebSocket 聊天 //聊天心跳
	export default {
		head: {
			link: [{
				rel: 'stylesheet',
				href: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css'
			}, ],
			script: [{
				src: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
			}],
		},
		components: {},
		data() {
			return {
                token:'自己存储的token',
				messageList: [], //储存聊天的内容
				content: '', //发送的内容
				linkShow: false,
			}
		},
		computed: {
			
		},
		watch: {
			
		},
		mounted() {
			let self = this;
			document.onkeydown = function(e) {
				if (window.event == undefined) {
					var key = e.keyCode;
				} else {
					var key = window.event.keyCode;
				}
				if (key == 13) {
					self.messageSend()
				}
			}
		},
		created() {
			this.$nextTick(function() {
				this.fetchData()
			})
		},
		methods: {
			fetchData() {
				let self = this
				if (player) {
					player.dispose()
				}
				player = new Aliplayer({
					id: 'J_prismPlayer',
					width: '772px',
					height: '100%',
					autoplay: true,
					//支持播放地址播放,此播放优先级最高
					source: '推流地址', // 推流地址
					isLive: true
				})
				player.on('play', function() {
					self.webSocket()
				});
			},
			webSocket() {
				let self = this
				if ("WebSocket" in window) {
					let socketlink = ''
					if (process.env.NODE_ENV === 'development') {
						socketlink = '本地连接接口'
						//console.log('开发环境')
					} else {
						socketlink = '线上连接接口'
						//console.log('生产环境')
					}
					//console.log("您的浏览器支持WebSocket");
					socket = new WebSocket(socketlink); //创建WebSocket连接
					socket.onopen = function() {
						//当WebSocket创建成功时，触发onopen事件
						console.log("连接成功");
						self.linkShow = true
						StopChatting = null
						//定时发送心跳保证聊天的正常
						StopChatting = setInterval(function() {
							socket.send('ping')
						}, 2000);
						//StopChatting
						//ws.send("hello"); //将消息发送到服务端
					}
					socket.onmessage = function(e) {
						//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
						let infos = JSON.parse(e.data)
						//保存接收来的信息
						if (infos[0].content != 'ping' && infos[0].content != '') {
							self.messageList.push(infos[0])
							//让信息一直处于最底部
							self.scrollBar()
						}
						//console.log(e.data)
					}
					socket.onclose = function(e) {
						//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
						console.log(e);
					}
					socket.onerror = function(e) {
						self.linkShow = false
						//self.webSocket()
						//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
						StopChatting = null
						clearInterval(StopChatting);
						console.log('连接失败');
					}
					//...
				} else {
					console.log("您的浏览器不支持WebSocket");
				}
			},
			//消息发送
			messageSend() {
				let self = this
				if (!self.token) {
					self.$message({
						showClose: true,
						duration: 1000,
						type: 'warning',
						message: '请登录再来聊天吧！'
					});
					return false;
				}
				if (!self.content) {
					self.$message({
						showClose: true,
						duration: 1000,
						type: 'warning',
						message: '请输入您要发送的内容！'
					});
					return false;
				}
				//判断聊天系统是否存在
				if (socket) {
					//是否连接成功
					if (socket.readyState == 1 && self.linkShow) {
						socket.send(self.content)
					} else {
						self.linkShow = false
						self.webSocket()
						if (self.linkShow) {
							socket.send(self.content)
						}
					}
					//让滚动条滚动到最底部
					self.content = ''
					//console.log(socket)
					//chatInterface
					// console.log(self.content)
					// console.log(socket)
				}
			},
			scrollBar() {
				this.$nextTick(function() {
					var div = document.getElementById('chatInterface');
					div.scrollTop = div.scrollHeight;
				})

			},
		},
		//离开页面后执行
		beforeRouteLeave() {
			if (player) {
				player.dispose()
				player = null
			}
			if (StopChatting) {
				clearInterval(StopChatting);
				StopChatting = null
			}
			document.onkeydown = undefined
		},
	}
</script>
<style>
	
</style>