阅读 751
WebScoket 实例

WebScoket 实例

这是我参与8月更文挑战的第11天,活动详情查看:8月更文挑战

上篇文章为大家讲解了 WebScoket 的基础,本篇文章就为大家通过一个实例介绍 WebScoket 的使用。没有看基础介绍的同学可以点击后边的链接查看。WebScoket 基础介绍

更多文章在我的github及个人公众号【全栈道路】上,欢迎观赏【前端知识点】,如有受益,不要钱,小手点个Star

本实例基于一个 Vue-cli 项目

创建思路

工厂函数抽离

  • 将 WebScoket 进行封装,以进行实例化,方便使用

同Vue实例下需要创建多个 WebScoket

  • 利用 ES6 class 创建
  • path 可自定义传入,解决多个 scoket 连接同时创建与存在

WebScoket 回调单独处理

  • WebScoket handler 通过创建实例后挂载
  • 挂载函数自定义

心跳检测

  • 实例添加公用心跳检测

Ready State 抽离

  • 实例封装 readystate 状态,便于获取

断线重连

  • 断线重连单独在使用示例时进行处理,便于解决业务需要

代码部分

WebScoket部分

  • WebScoket 要有一定的可扩展性和灵活性,通过 node 环境变量的方式注入请求地址。
  • 基础介绍中说到的 WebScoket 需要解决的心跳问题,也在实例中增加了心跳检测,其中心跳检测的心跳时间需要开发者自己去掌握,在不影响基本数据传递的基础上,选择合适的心跳时间。
    • 心跳检测机制就是通过 scoket 链接将心跳包按照心跳检测周期时间发送到服务器端,同时服务器端将回应消息发送回来,以确保连接正常,双方能够正常传递信息。
  • 将 WebScoket 的相关属性API整体暴露,便于在业务中进行调用处理。
// scoket.js
const webscketurl = process.env.BACKEND_URL // 利用node环境变量设置scoket path

class WebSocketUtil{
	constructor(wspath){
		let protocol = (window.location.protocol == 'https:') ? 'wss://' : 'ws://';
		// 判断当前使用协议头(上一篇 WebScoket 基础已讲过)
		let wsuri = protocol + webscketurl + wspath

		// new 实例
		this.websock = new WebSocket(wsuri)
	}

	// 心跳检测
	heartCheck(){ 
		let self = this;
		if (this.timeoutObj) {
			clearInterval(this.timeoutObj)
		}
    	this.timeoutObj = setInterval(function(){
      		// 这里发送一个心跳,后端收到后,返回一个心跳消息,
      		// onmessage拿到返回的心跳就说明连接正常
      		if (self.readyState() != 1) {
        		clearInterval(self.timeoutObj)
			}
			self.websock.send("HeartBeat");
			// 发送心跳检测
      		console.log("HeartBeat");
		}, 5000)
  	}

  	// 实例创建后自定义创建 handler
  	on(funName,handler){
		this.websock[`on${funName}`] = handler
		// 暴露onmessage、onclose、onopen、onerror方法
	}
 
	// 发送scoket数据
	send(msg){
		this.websock.send(msg)
	}

	// 监听websock链接状态
	readyState(){
	// 获取webscoket实例链接状态 0:正在建立连接连接,还没有完成 1:连接成功,可以进行通信 2:连接正在进行关闭握手,即将关闭 3:连接已经关闭或者根本没有建立
		return this.websock.readyState;
	}
}

// 导出实例
export default WebSocketUtil
复制代码

实例创建部分

// index.vue
import $WebSocketUtil from '../../api/scoket.js'

// 实例化聊天scoket
initScoket() {
	let token = this.$cookies.get('token')
	let pathData = '/chat?token=' + token
	this.webscoketChat = new $WebSocketUtil(pathData)
	this.webscoketChat.on('message', this.websocketonmessage)
	this.webscoketChat.on('open', this.websocketonpen)
	this.webscoketChat.on('error', this.websocketonerror)
	this.webscoketChat.on('close', this.websocketonerror)
	Vue.prototype.$scoketChat = this.webscoketChat
},

// socket建立成功后开始进行心跳检测
websocketonpen() {
	this.webscoketChat.heartCheck()
},

// 发生错误断线重连
websocketonerror() {
	let self = this
	if (this.reconnectChat) { return }
	this.reconnectChat = true
	setTimeout(function () {
	  self.initScoket()
	  console.log("Chat正在重连...")
	  self.reconnectChat = false
	}, 10000)
},

// 接收 webscoket 消息
websocketonmessage(e) {
	let res = JSON.parse(e.data);
	HandleChat(res.type,res.data,res.wxId || '');
},
复制代码

写在最后

  • 如果你对 WebScoket 一无所知,建议先学习这篇文文章, WebScoket 基础介绍
  • 本实例仅是根据自身需求和代码逻辑编写,并不一定适合所有项目,需要根据实际情况进行改进,如果您有更好的想法,欢迎交流 chinajnzhang@hotmail.com

写在最后

如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人!

欢迎关注【全栈道路】及微信公众号【全栈道路】,获取更多好文及免费书籍!
有需要【百度】&【字节跳动】&【京东】&【猿辅导】内推的也请留言哦,你将享受VIP级极速内推服务~

往期好文

微信 JS API 支付的实现

创建个性化的 Github 个人主页

面试官问你<img>是什么元素时你怎么回答

特殊的JS 浮点数的存储与计算

[万字长文]百度和好未来面试经含答案 | 掘金技术征文

前端实用正则表达式&小技巧,一股脑全丢给你🏆 掘金技术征文|双节特别篇

冷门的 HTML tabindex 详解

几行代码教你解决微信生成海报及二维码

Vue3.0 响应式数据原理:ES6 Proxy

[前端面试]前端缓存问题看这篇,让面试官爱上你

如何优雅地画一条细线

[三分钟小文]前端性能优化-HTML、CSS、JS部分

[三分钟小文]前端性能优化-页面加载速度优化

[三分钟小文]前端性能优化-网络传输层优化

文章分类
前端
文章标签