WebSocket前端+vue

2019-09-06 15:00:49 阅读：299 来源： 互联网

标签：function readyState vue websocket 前端 WebSocket data 连接

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

标签：function,readyState,vue,websocket,前端,WebSocket,data,连接
来源： https://blog.csdn.net/qq_33435488/article/details/100578440

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

WebSocket前端+vue