WebSocket

The Websocket (opens new window).

State

The useWebSocket function exposes the following reactive state:

import { useWebSocket } from "vue-composable";

const {
  supported,
  ws,
  messageEvent,
  errorEvent,
  data,
  isOpen,
  isClosed,
  errored
} = useWebSocket();

State	Type	Description
supported	Boolean	Is supported
ws	WebSocket|null	WebSocket instance, returns null if supported === false
messageEvent	Ref<MessageEvent|null>	Last message event received
errorEvent	Ref<ErrorEvent>	Error event
data	Ref<any>	Last data received
isOpen	Ref<Boolean>	Is websocket open
isClosed	Ref<Boolean>	Is websocket closed
errored	Ref<Boolean>	Is websocket errored

Methods

The useWebSocket function exposes the following methods:

import { useWebSocket } from "vue-composable";

const { send, close } = useWebSocket();

Signature	Description
send	Sends message through WebSocket
close	Closes WebSocket connection

Example

open: false

closed: false

data:

errored: false

Code

<template>
  <div>
    <button @click="send" :disabled="!isOpen">Send</button>
    <button @click="close(1000)" :disabled="!isOpen">Close</button>
    <p>open: {{ isOpen }}</p>
    <p>closed: {{ isClosed }}</p>
    <p>data: {{ data }}</p>
    <p>errored: {{ errored }}</p>
  </div>
</template>

<script>
import { useWebSocket } from "vue-composable";
export default {
  name: "web-socket-example",
  setup() {
    const { isOpen, isClosed, data, errored, send, close } = useWebSocket(
      "wss://javascript.info/article/websocket/demo/hello"
    );

    return {
      isOpen,
      isClosed,
      data,
      errored,
      send,
      close
    };
  }
};
</script>