这是一个使用 Vue3 组合式 API 和 TS 封装 websocket 的例子
这个组件在 setup 中:
创建了一个 WebSocket 连接
定义了 sendMessage 方法发送消息
监听 WebSocket 的开启、接收消息和关闭事件
暴露 sendMessage、onClose 方法给模板使用
import {ref} from 'vue'
export default {
setup() {
const ws = ref<WebSocket>()
const text = ref<number | string>(1)
const reconnect = ref<boolean>(false)
function init() {
// http://www.websocket-test.com/
ws.value = new WebSocket('ws://121.40.165.18:8800')
// 实例 - 打开连接
ws.value.onopen = () => {
console.log('WebSocket connected!')
reconnect.value = false
}
// 实例 - 接受数据
ws.value.onmessage = ({data}) => {
console.log('Received message:', data)
}
// 实例 - 监听关闭
ws.value.onclose = () => {
console.log('WebSocket closed!')
if (!reconnect.value) {
reconnect.value = true
setTimeout(init, 1000)
}
}
}
// 实例 - 关闭连接
function onClose() {
ws.value?.close()
}
// 实例 - 发送数据
function sendMessage(msg: any) {
text.value = msg + 1
ws.value?.send(msg + 1)
}
init()
return {text, sendMessage, onClose}
}
}
那么，可以通过组件：
输入消息（默认是数字）并点击 发送按钮
触发 sendMessage 方法,通过 WebSocket 连接发送消息
接收来自 WebSocket 服务端的响应消息
监听 WebSocket 状态变化
触发 onClose 方法，关闭 WebSocket 连接，测试断线重连功能
使用这个组件的模板:
<div class="parent">
<div>
<input v-model="text">
<button @click="sendMessage(text)">Send</button>
</div>
<div>
<button @click="onClose">断线重连</button>
</div>
</div>
这是一个基本的 WebSocket 断线重连示例：
在 setup 中处理逻辑
暴露需要在模板或外部使用的方法/数据
模板中可以直接使用这些方法/数据
完善的演示代码如下：
<template>
<div class="parent">
<div>
<input v-model="text">
<button @click="sendMessage(text)">Send</button>
</div>
<ul>
<li v-for="(num,idx) in list" key="idx" v-html="num"></li>
</ul>
<div v-if="active">
<button @click="onClose">断线重连</button>
</div>
</div>
</template>
import {ref} from 'vue'
export default {
setup() {
const ws = ref<WebSocket>()
const text = ref<number|string>(1)
const reconnect = ref<boolean>(false)
const list = ref<any>([])
const active = ref(false)
const timer = ref(0)
function init() {
// http://www.websocket-test.com/
ws.value = new WebSocket('ws://121.40.165.18:8800')
// 实例 - 打开连接
ws.value.onopen = () => {
console.log('WebSocket connected!')
// 断线重连 - 标记
reconnect.value = false
// 断线重连 - 按钮
active.value = true
// 停止重连
clearInterval(timer.value)
}
// 实例 - 接受数据
ws.value.onmessage = ({data}) => {
console.log('Received message:', data)
list.value.push(data);
}
// 实例 - 监听关闭
ws.value.onclose = () => {
console.log('WebSocket closed!')
if (!reconnect.value) {
connect();
}
}
}
// 实例 - 关闭连接
function onClose() {
list.value = []
active.value = false
ws.value?.close()
}
// 实例 - 发送数据
function sendMessage(msg: string) {
text.value = msg + 1
ws.value?.send(msg + 1)
}
init()
// 断线重连
function connect() {
reconnect.value = true
timer.value = setInterval(init, 1000)
}
return {text, list, active, sendMessage, onClose}
}
}
