WebSocket前端+vue

2019/9/6 14:58:55 人评论 次浏览 分类:vue.js

广告开始--------------------------

全网最全17套vue.js视频教程

文件格式:视频      大小:160G左右

预览网址:【直接浏览网址即可】http://nicethemes.cn/product/view14.html

从入门到精通全套vue.js实战视频教程。

广告结束--------------------------

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33435488/article/details/100578440

WebSocket前端+vue
1.主要代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!--引入样式-->
	<style>
		/* 屏蔽界面初始化闪跳 vue脚本闪跳*/
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body style="overflow:hidden" scroll="no">
	<div id="WebSocket" style="overflow: hidden;" v-cloak>
		<div>
			<input type="text" v-model="text">
			<button @click="send()">发送消息</button>
			<br>
			<button @click="closeWebSocket()">关闭websocket连接</button>
			<br>		
			<button @click="initWebSocket()">开启websocket连接</button>
			<br>
			<div>{{data}}</div>
		</div>

	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	
	var Main = new Vue({
			el: '#WebSocket',
	
			//数据定义
			data: function () {
				return {
					text: '',
					data: '',
					websocket: null,
				}
			},
			//方法定义
			methods: {			
				initWebSocket() {
					var _this=this;					
					if ('WebSocket' in window) {
						_this.websocket = new WebSocket('ws://localhost:9016/testWebsocket');	 				
						//连接错误				   
						_this.websocket.onerror = function() {
							_this.data ='连接错误	状态码:' + _this.websocket.readyState;
							//此时可以尝试刷新页面
						};  		   
						//连接成功
						_this.websocket.onopen = function() {
							_this.data ='连接成功	状态码:' + _this.websocket.readyState;
						};  		   
						//收到消息的回调
						_this.websocket.onmessage = function(event) {
							_this.data ='接收消息:'+event.data;
						};  		   		   
						//连接关闭的回调
						_this.websocket.onclose = function() {
							_this.data ='连接关闭	状态码:' + _this.websocket.readyState;
						};
						//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
						window.onbeforeunload = function() {
							_this.websocket.close()
						};
						
					} else {
					  alert('您的浏览器不支持WebSocket')
					}						 				 
				},	
				//websocket发送消息
				send() {
					this.websocket.send(this.text);
					this.text = '';
				},
				closeWebSocket() {
					this.websocket.close();
				}	
			},
			//界面初始化动作
			created: function () {
				this.initWebSocket();
			},
		});
</script>
</html>

2.代码解读
2.1连接和操作
申请一个WebSocket对象,参数是需要连接的服务器端的地址,WebSocket协议的URL使用ws://开头

_this.websocket = new WebSocket('ws://localhost:9016/testWebsocket');

WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror,我们所有的操作都是采用消息的方式触发的

//连接错误				   
_this.websocket.onerror = function() {
	_this.data ='连接错误	状态码:' + _this.websocket.readyState;
	//此时可以尝试刷新页面
};  		   
//连接成功
_this.websocket.onopen = function() {
	_this.data ='连接成功	状态码:' + _this.websocket.readyState;
};  		   
//收到消息的回调
_this.websocket.onmessage = function(event) {
	_this.data ='接收消息:'+event.data;
};  		   		   
//连接关闭的回调
_this.websocket.onclose = function() {
	_this.data ='连接关闭	状态码:' + _this.websocket.readyState;
};

2.2.WebSocket对象的对象特性
send方法:
send方法用于在WebSocket连接建立后,客户端向服务端发送消息

this.websocket.send(this.text);

close方法:
close方法用于关闭连接

this.websocket.close();

readyState属性 :
WebSocket通过只读特性readyState报告其连接状态,连接状态共有四个

状态
0 连接正在进行中,但还未建立
1 连接已建立,消息可以开始传递
2 连接正在进行关闭
3 连接已关闭
_this.websocket.readyState

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->