在uniapp中用vue3使用webSocket获取后台服务器数据并调用数据 用TS开发
时间: 2024-05-12 16:19:32 浏览: 9
1. 安装依赖
在uniapp项目根目录下,打开终端输入以下命令安装依赖:
```
npm install --save-dev typescript @vue/cli-plugin-typescript @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-typescript vue-loader@next @vue/compiler-sfc@next
```
安装完成后,在项目根目录下会生成一个 `tsconfig.json` 文件和一个 `src` 目录,`src` 目录下会生成一个 `main.ts` 文件。
2. 配置vue3
在 `main.ts` 文件中,引入 `createApp` 和 `defineComponent` 函数,并使用 `defineComponent` 定义一个组件。
```typescript
import { createApp, defineComponent } from 'vue';
const app = createApp({});
const HelloWorld = defineComponent({
name: 'HelloWorld',
props: {
msg: String
},
setup(props) {
return {
message: props.msg
}
},
template: `<div>{{ message }}</div>`
});
app.component('HelloWorld', HelloWorld);
app.mount('#app');
```
3. 配置WebSocket
在 `HelloWorld` 组件中,使用 `onMounted` 钩子函数在组件加载完成后创建 WebSocket 连接。在创建连接时,需要设置 `onopen`、`onmessage`、`onerror` 和 `onclose` 四个事件的回调函数。
```typescript
import { createApp, defineComponent, onMounted } from 'vue';
const app = createApp({});
const HelloWorld = defineComponent({
name: 'HelloWorld',
props: {
msg: String
},
setup(props) {
onMounted(() => {
const ws = new WebSocket('ws://localhost:3000');
ws.onopen = () => {
console.log('WebSocket connection established.');
};
ws.onmessage = (event) => {
console.log('WebSocket message received:', event.data);
};
ws.onerror = (event) => {
console.error('WebSocket error:', event);
};
ws.onclose = () => {
console.log('WebSocket connection closed.');
};
});
return {
message: props.msg
}
},
template: `<div>{{ message }}</div>`
});
app.component('HelloWorld', HelloWorld);
app.mount('#app');
```
4. 发送和接收数据
在 `HelloWorld` 组件中,可以通过 `ws.send()` 方法向服务器发送数据,并通过 `ws.onmessage` 事件接收服务器返回的数据。在接收到数据后,可以通过 `JSON.parse()` 方法将数据转换为对象,并调用其中的属性。
```typescript
import { createApp, defineComponent, onMounted } from 'vue';
const app = createApp({});
const HelloWorld = defineComponent({
name: 'HelloWorld',
props: {
msg: String
},
setup(props) {
onMounted(() => {
const ws = new WebSocket('ws://localhost:3000');
ws.onopen = () => {
console.log('WebSocket connection established.');
ws.send(JSON.stringify({ type: 'getData' }));
};
ws.onmessage = (event) => {
console.log('WebSocket message received:', event.data);
const data = JSON.parse(event.data);
console.log('Data:', data);
};
ws.onerror = (event) => {
console.error('WebSocket error:', event);
};
ws.onclose = () => {
console.log('WebSocket connection closed.');
};
});
return {
message: props.msg
}
},
template: `<div>{{ message }}</div>`
});
app.component('HelloWorld', HelloWorld);
app.mount('#app');
```
这样,我们就可以在 uniapp 中使用 vue3 和 TypeScript 开发 WebSocket 应用了。