websocket在vue中的使用_vue-native-websocket-优快云博客

本文介绍了WebSocket协议及其在前端开发中的应用，特别是在Vue.js项目中的使用。通过一个vue-native-websocket插件，演示了如何在Vue中实现WebSocket连接，并讨论了心跳机制确保连接的稳定性。此外，还探讨了WebSocket的优缺点，包括效率高、资源消耗少，但对错误处理和连接稳定性的要求较高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、websocket

websocket是什么？为什么要用websocket？

websocket是一种网络通信呢协议，同http、https协议，是客户端与服务端通信用的，websocket创建在 TCP 上、通过HTTP/1.1 协议的101状态码进行握手。

为什么要用websocket？试想以下场景：
你妈妈在厨房做饭，你饿得不行，想马上吃到，但是妈妈不着急，她做完饭可能刷个锅洗个碗，你想在第一时间吃到饭，就得知道饭做好的消息，排油烟机声音太大得开门才能听到。

用http连接：
你（进厨房）：妈妈饭好了吗？
妈妈：没好呢，再等会儿吧。
你（5分钟后又进厨房）：妈妈饭好了吗？
妈妈（🙄️）：急什么急，你急你做！
你（又5分钟又进厨房）：妈妈饭好了吗……
妈妈：好了好了好了，催催催，饿死鬼！

用websocket连接：
你在卧室愉快玩手机（和妈妈约定饭做好后主动告诉你）
妈妈（第一时间）：饭好了，出来端吧。
你：好嘞，来啦！

妈妈是服务端，你是客户端，想要服务端有新消息主动发给客户端，就要使用1、http连接，setInterval轮询请求接口获取消息或2、websocket连接，服务端主动发送消息。

二、使用websocket

这里使用了websocket结合vue的一个插件vue-native-websocket，地址：https://github.com/nathantsoi/vue-native-websocket，优点可以自动重连，缺点是找不到暴露的重连api reconnect，也可能我笨没找到😭

main.js中引用

import websocket from 'vue-native-websocket';

Vue.use(websocket, '', {
   
  connectManually: true, // 手动连接
  format: 'json', // json格式
  reconnection: true, // 是否自动重连
  reconnectionAttempts: 5, // 自动重连次数
  reconnectionDelay: 2000, // 重连间隔时间
});

index.vue

data() {
   
	return {
   
		paramA: "aa",
		paramB: 123,
		food: "",
		drink: "",
		num: 2, // 两碗饭
	}
}，

mounted() {
   
	this.initWebSocket()