越写悦快乐之Vue项目如何集成WebSocket

SockJS - 图片来自我的手机

作为一名有追求的码农来说，不管是前端、后端、抑或是测试、运维，都需要保持一定的好奇心才可以，那么大家都知道Vue作为前端框架的集大成者，拥有着易用、灵活和高效的优点，那么对于在Vue项目中集成WebSocket，大家有没有实践过呢？今天我为大家分享一下如何在Vue项目中集成WebSocket。

开发环境

• Window 10.0.17763
• Node 10.18.0
• Visual Studio Code 1.48.2
• Vue 2.6.12

特别说明

本项目使用SockJS-Client和STOMP.js来支持WebSocket后端（Node.js、Java等），在支持WebSocket的浏览器中可以直接进行连接、消息收发和端口等操作（详细内容请参考相关文档）。

接入步骤

添加依赖

我们在项目的入库页面（index.html）中通过CDN的方式引入SockJS-Client和STOMP.js，文件内容如下。

在Vue文件中连接和关闭WebSocket

既然我们在项目的入口页面中引入了WebSocket相关库，那么挂载在app下的Vue组件均可以使用STOMP和SockJS，此时我们在Vue的生命周期函数mounted、和beforeDestroy中分别调用WebSocket的初始化和销毁函数，在data中声明WebSocket连接的Host、Topic等相关变量，下面给出Vue文件的内容如下。

sendMessage函数用于测试消息发送，发送完消息后持久化消息并通过订阅的Topic即时收取消息，收到消息后保存到表格中。

getToken函数是为了获取登录认证后保存的个人信息。

验证连接结果

我们启动前后端的项目，然后定位到该页面，打开开发者工具并切换到控制台，控制台会显示以下信息。

控制台结果 - 图片来自我的手机

通过以上的截图我们可以得知WebSocket连接的后端地址，心跳检测的输出和stompClient的认证字段，那么急于此我们可以构建不同的应用场景，比如聊天、消息收发、任务提醒等功能，再配合其他功能来满足客户的诉求，我相信WebSocket的接入会让你的应用更好用。

个人收获及感想

我们的文章今天为大家介绍了Vue项目中接入WebSocket的方法，通过连接、收发消息和断开等方法来接入WebSocket后端，接入之后就可以愉快地集成其他的业务啦。而在现在的复杂多变的产品迭代周期中，WebSocket不可或缺，并且会不断发展和变化，相信过不了多久，我们的产品也会慢慢完善，并趋于完美。让我们一起持续打造能满足客户诉求的好产品，持续为客户做好服务，成为更好的团队和更好的自己。