# vueWebsocketHandler

**Repository Path**: masaikk/vue-websocket-handler

## Basic Information

- **Project Name**: vueWebsocketHandler
- **Description**: vue使用websocket的库，有心跳检测功能
- **Primary Language**: JavaScript
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-01-31
- **Last Updated**: 2024-10-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vueWebsocketHandler

### Description
**vueWebsocketHandler** is a library used to handle WebSocket by hooks and plugin in Vue3.



### usage

#### install this package

```shell
npm install vue-websocket-handler --save
```

You can use it in a single vue component. In a config file, you can initialize this handler and export it.
```typescript
import type { WebSocketConfig } from "vue-websocket-handler";
import { useWebSocket } from "vue-websocket-handler";

const webSocketConfig: WebSocketConfig = {
  host: "localhost",
  port: "8899",
  url: "/ws",
  emitters: [
    () => {
      console.log("send msg");
    },
  ],
};

const webSocketHandler = useWebSocket(webSocketConfig);

export { webSocketHandler };



```

In a *.vue file, you can import this handler and override `sendMessage` in `setup()` function like this:

```typescript
import { webSocketHandler } from "../config/webSocket";
import { onMounted } from "vue";

onMounted(() => {
  setTimeout(() => {
    webSocketHandler.sendMessage!("hello")
  }, 3000);
  webSocketHandler.onmessage = (event?: MessageEvent) => {
    console.log(event);
    console.log(event?.data)
  };
});
```

You can also use it by a vue plugin after `vue.use()` like
```typescript

import type { WebSocketConfig } from "vue-websocket-handler";

const webSocketConfig: WebSocketConfig = {
  host: "localhost",
  port: "8899",
  url: "/ws",
  emitters: [
    () => {
      console.log("send msg");
    },
  ],
};

export { webSocketConfig };

```
And in main.ts , import config and use it
```typescript
import { useWebSocketPlugin } from "vue-websocket-handler";
import { webSocketConfig } from "./config/webSocket";

const app = createApp(App);
app.use(useWebSocketPlugin, webSocketConfig);
app.mount("#app");
```

In *.vue file , import `WsKey` to inject WebSocketHandler and use it.
```typescript
import { inject, onMounted } from "vue";
import { WsKey } from "vue-websocket-handler";

onMounted(() => {
  let wsh = inject(WsKey);
  console.log(wsh);
});

```
Also, you can use hook function names `useInjectWebSocket()` to get a provided WebSocketHandler in `setup()` like
```typescript
import { onMounted } from "vue";
import { useInjectWebSocket } from "vue-websocket-handler";
import { WebSocketHandlerType } from "vue-websocket-handler";

onMounted(() => {
  let wsh: WebSocketHandlerType = useInjectWebSocket();
  wsh.logVersion();
});
```

### backend sample 
websocket server sample in fastapi written in Python. You can write back-end in any other coding language.
```python
from fastapi import FastAPI
from fastapi.websockets import WebSocket

app = FastAPI()


@app.websocket_route("/ws")
async def websocket(websocket: WebSocket) -> None:
    await websocket.accept()

    r = 'hello'
    while True:
        msg = r
        data = await websocket.receive_text()
        print(data)
        await websocket.send_json({"msg": msg, "data": data})


if __name__ == '__main__':
    import uvicorn

    uvicorn.run(
        app='main:app',
        host="127.0.0.1",
        port=8899,
    )

```