# 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>