npm install -g @vue/cli vue create my-vue-ts-app 在创建项目时,选择包含 TypeScript 的预设配置。 步骤二:安装 WebSocket 客户端库(可选) 虽然Vue 3 自带 WebSocket API,但你也可以选择使用一个更加友好的库,如 socket.io。这里我们使用原生 WebSocket。 步骤三:创建 WebSocket Hook 在src/composables 目...
/** * websocket */ const wsUrl = "ws://192.168.160.7:8580/ws"; // websocket 默认连接地址 let websocket: any; // 用于存储实例化后websocket let isConnect = false; // 连接标识 避免重复连接 let rec: any; // 断线重连后,延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码 // 创建webs...
在Observer.ts中,需要向Websocket中添加sendObj方法,这在js中很简单,直接websocket.sendObj = ()=>{}即可。但是在ts中它就会报错,Websocket中不存在sendObj方法,一开始我想在lib.dom.d.ts中定义这个方法,但是想了想这样做不妥,不能修改全局的库声明文件,毕竟这是插件。 image-20201102210949765 经过我的一番折腾...
TSRPC 完全通过文件名和类型名来识别协议,务必要严格按照 TSRPC 规定的名称前缀来命名,文件名为:Ptl{接口名}.ts,在 src/api/users 目录下,也会生成对应的 Apixxx.ts 文件,就是对应的接口 users/Add、users/Del、users/Get、users/Update。
本文作者使用的是ts+vue3的setup语法糖,大家注意使用的vue版本! 在stroe中 import { createStore } from 'vuex' import { stateInt } from '../interface/storeInterface' const state: stateInt = { //推送消息 data: {}, webSocket: null,
插件重构完成后,我们将整个项目的文件复制到一个vue3项目的node_modules/vue-native-websocket下,替换原先的文件。 image-20201103001444839 在main.ts中导入并使用插件。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import { createApp } from "vue"; const app = createApp(App); // 使用VueNativeSock...
WebSocket 封装,vue3项目 拿来即用 vue3项目,借鉴了网上的一些,感觉不太适合,就自己边借鉴,边弄了一个,复制即用 // useWebSocket.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
在src/store目录新建use-websocket.ts import { defineStore } from 'pinia' import { ref } from 'vue' import { STORAGE_ACCESS_TOKEN_KEY } from '~/constant' const VITE_API_HTTPS_HOST_BASE_PATH = import.meta.env.VITE_API_HTTPS_HOST_BASE_PATH as string ...
@/types/vuex/index.ts中定义一个接口 export interface socket { webSocket: any data: Object [propName: string]: any } 方式2 websocket 在utils中单独封装 import { ElMessage as message } from 'element-plus'import storage from'store'import socket from'@/types/api/socket'const socket: socket={...
这是一个使用 Vue3 组合式 API 和 TS 封装 websocket 的例子 这个组件在 setup 中: 创建了一个 WebSocket 连接 定义了 sendMessage 方法发送消息 监听 WebSocket 的开启、接收消息和关闭事件 暴露 sendMessage、onClose 方