webSocket的基本用法（三）——Vue客户端浏览器webSocket的基本用法

一、vue客户端浏览器webSocket的基本用法

 WebSocketDemo地址：https://download.csdn.net/download/D_lunar/21849137?spm=1001.2014.3001.5503

 

<template>
	<el-container class="demo">
		<el-header>
			<el-button type="primary" @click="openSocket">开启WebSocket连接</el-button>
			<el-button type="success" @click="closeSocket">关闭WebSocket连接</el-button>
			<el-tag style="float: right;height: 60px;line-height: 60px;" type="success">{{readyState}}</el-tag>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-tag type="danger">接收的信息</el-tag>
			</el-aside>
			<el-main>
				<el-input type="textarea" rows="8" placeholder="暂无" v-model="receive_msg" disabled>
				</el-input>
			</el-main>
		</el-container>
		<el-container>
			<el-main>
				<el-input type="textarea" rows="8" placeholder="请输入内容" v-model="send_msg">
				</el-input>
			</el-main>
			<el-aside width="200px">
				<el-button type="success" @click="sendMsg">发送信息</el-button>
			</el-aside>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				path: config.socket_url,
				receive_msg: '',
				send_msg: '',
				readyState: '连接未开启'
			}
		},
		mounted() {
			// this.init()
		},
		methods: {
			init() {
				/* 官方地址： https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket */
				// 使用 WebSocket() 构造函数来构造一个 WebSocket 
				this.socket = new WebSocket(this.path);
				// 用于指定连接成功后的回调函数
				this.socket.onopen = this.onopen
				// 用于指定连接关闭后的回调函数
				this.socket.onclose = this.onclose
				// 用于指定连接失败后的回调函数
				this.socket.onerror = this.onerror
				// 用于指定当从服务器接受到信息时的回调函数
				this.socket.onmessage = this.onmessage
			},
			onopen(event) {
				this.readyState = '连接状态：' + this.connectState(this.socket.readyState);
				console.log('连接开启:', event)
				this.$message({
					showClose: true,
					message: '连接开启',
					type: 'success'
				});
			},
			onclose(event) {
				this.readyState = '连接状态：' + this.connectState(this.socket.readyState);
				console.log('连接关闭:', event)
				this.$message({
					showClose: true,
					message: '连接关闭',
					type: 'success'
				});
			},
			onerror(err) {
				//服务端未启动时，会进入连接出错，其后进入连接关闭
				this.readyState = '连接状态：' + this.connectState(this.socket.readyState);
				console.log('连接出错:', err)
				this.$message({
					showClose: true,
					message: '连接出错',
					type: 'error'
				});
			},
			onmessage(msg) {
				this.readyState = '连接状态：' + this.connectState(this.socket.readyState);
				console.log('接收到的消息：', msg)
				this.receive_msg = msg.data
			},
			openSocket() {
				this.init()
			},
			closeSocket() {
				if (this.socket == null) {
					console.log('连接未开启')
					this.$message({
						showClose: true,
						message: '连接未开启',
						type: 'error'
					});
					return
				}
				this.socket.close(1000, '手动关闭连接')
			},
			sendMsg() {
				if (this.socket == null) {
					console.log('连接未开启')
					this.$message({
						showClose: true,
						message: '连接未开启',
						type: 'error'
					});
					return
				}
				if (this.socket.readyState != 1) {
					console.log('连接未开启')
					this.$message({
						showClose: true,
						message: '连接未开启',
						type: 'error'
					});
					return
				}
				this.socket.send(this.send_msg)
			},
			connectState(readyState) {
				switch (readyState) {
					case 0:
						return '正在链接中'
						break;
					case 1:
						return '已经链接并且可以通讯'
						break;
					case 2:
						return '连接正在关闭'
						break;
					case 3:
						return '连接已关闭或者没有链接成功'
						break;
					default:
						return '连接未开启'
						break;
				}
			},
			waitForSocketConnection(socket, callback) {
				setTimeout(() => {
					if (socket.readyState === 1) {
						console.log("连接开启")
						this.$message({
							showClose: true,
							message: '连接开启',
							type: 'success'
						});
						if (callback != null) {
							callback();
						}
						return;

					} else {
						console.log("连接失败，正在重连...")
						this.$message({
							showClose: true,
							message: '连接失败，正在重连……',
							type: 'error'
						});
						waitForSocketConnection(socket, callback);
					}
				}, 5); // wait 5 milisecond for the connection...
			},
		}
	}
</script>

<style>
	.demo {
		width: 50%;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>