【前端】websocket 讲解与项目中的使用（附源码）

• • 属性

• 方法

• 心跳

• 要点总结

• 问题思考

• 扩展知识

• 源代码

写在前面

===================================================================

本文不会去分析 websocket 与 http 接口的区别，也不会写太多基础知识的介绍。只介绍 websocket 在前端开发中的实际应用（附源码）

websocket 作为全双工通信工具，在 web 开发中，用于前后端之间的消息推送、实时通信；这一点是 http 接口无法代替的（因为 websocket 是更优雅，性能更好的方式）

其实 websocket 是简单的。但是，很多人在第一次使用它的时候，会有很多疑问以及无从下手的问题。

下面开始 websocket 在项目中的使用。

创建连接

===================================================================

var ws = new WebSocket(url, [protocol])

第一个参数 url，指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

例如：

let url = ${process.env['VUE_APP_WEBSOCKET']}/websocket

let ws = new WebSocket(url)

即可拿到一个 ws 实例。

监听事件

=========================================================