websocket每隔5秒给服务端send一次信息_websocket后台给前端发消息频率

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

destroyed() {
this.$destroy()
clearInterval(this.timer) // 清除定时器
// 页面销毁时关闭长连接
// if (this.webstock !== null) {
// this.webstock.close()
// }
window.removeEventListener(“beforeunload”, e => this.beforeunloadHandler(e))
window.removeEventListener(“unload”, e => this.unloadHandler(e))
}

**三、功能点三WebSocket连接发生错误的时候，连接错误 需要重连**

websocketonerror(e) {
console.log(“WebSocket连接发生错误”)
// 连接断开后修改标识
this.isConnect = false
// 连接错误 需要重连
this.reConnect()
}
},

**全部代码如下：**

**问题一、**


**报错信息如下：socketReport.vue?8285:51 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.**





![](https://img-blog.csdnimg.cn/img_convert/d0aba763f8f9f501cf2a44b35c4fff6a.png)



要明白这个问题产生的原因，就需要了解websocket的几个状态。通常在实例化一个websocket对象之后，客户端就会与服务器进行连接。但是连接的状态是不确定的，于是用readyState属性来进行标识。它有四个值，分别对应不同的状态：

CONNECTING：值为0，表示正在连接；
OPEN：值为1，表示连接成功，可以通信了；
CLOSING：值为2，表示连接正在关闭；
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

这样问题的原因就很明显了，之所以数据不能发送出去，是因为websocket还处在“CONNECTING”状态下，连接还没有成功。


**解决办法**


只要在函数中添加对状态的判断，在状态为OPEN时，执行send方法即可。方法一代码如下

this.init()
if (this.webstock.readyState===1) {
this.webstock.send()
}

**问题二、vue项目中监听电脑网络的状态，突然断开网络或者关机**


写法一、

data() {
return {
network: true, //默认有网
        }
}

mounted() {
window.addEventListener(“online”, () => {
console.log(“网络已连接:”)
this.network = true
})
// 检测断网
window.addEventListener(“offline”, () => {
console.log(“已断网:”)
this.network = false
if (this.webstock !== null) {
this.webstock.close()
}
})
}

**控制台打印的结果：**


**断开网络的情况**


### 总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![image](https://img-blog.csdnimg.cn/img_convert/537e9c3ef29f8b9e0f14083b36b578bc.webp?x-oss-process=image/format,png)
![image](https://img-blog.csdnimg.cn/img_convert/4ffc08107d2ca4db3c29084c14c12dbc.webp?x-oss-process=image/format,png)

么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-hfZbqPwE-1715167831933)]
[外链图片转存中...(img-WiMeh0SW-1715167831934)]