feat: add useWebSocket composable function (#21)

* feat: implement basic websocket connection

* docs: added websocket function to docs

* docs: added websocket docs links

Author: logaretm

README.md

@@ -46,6 +46,7 @@ Each composition function is designed to degrade gracefully so you can safely us
 - [Preferred Color Scheme](https://logaretm.github.io/vue-use-web/guide/preferred-color-scheme.html).
 - [Preferred Languages](https://logaretm.github.io/vue-use-web/guide/preferred-languages.html).
 - [Script](https://logaretm.github.io/vue-use-web/guide/script.html).
+- [WebSocket](https://logaretm.github.io/vue-use-web/guide/websocket.md).
 - [Window Scroll Position](https://logaretm.github.io/vue-use-web/guide/scroll-position.html).
 - [Window Size](https://logaretm.github.io/vue-use-web/guide/window-size.html).
 - Bluetooth (WIP).

docs/.vuepress/config.js

@@ -73,6 +73,7 @@ module.exports = {
         'preferred-languages',
         'script',
         'scroll-position',
+        'websocket',
         'window-size'
       ],
       '/examples/': []

docs/README.md

@@ -54,6 +54,7 @@ npm install @vue/composition-api vue-use-web
 - [Preferred Color Scheme](./guide/preferred-color-scheme.md).
 - [Preferred Languages](./guide/preferred-languages.md).
 - [Script](./guide/script.md).
+- [WebSocket](./guide/websocket.md).
 - [Window Scroll Position](./guide/scroll-position.md).
 - [Window Size](./guide/window-size.md).
 - Bluetooth <Badge text="WIP" type="warn" />.

docs/guide/README.md

@@ -38,6 +38,7 @@ These are the currently implemented Web APIs and the planned ones.
 - [Preferred Color Scheme](./preferred-color-scheme.md).
 - [Preferred Languages](./preferred-languages.md).
 - [Script](./script.md).
+- [WebSocket](./guide/websocket.md).
 - [Window Scroll Position](./scroll-position.md).
 - [Window Size](./window-size.md).
 - Bluetooth <Badge text="WIP" type="warn" />.

docs/guide/websocket.md

@@ -0,0 +1,74 @@
+# Web Sockets
+
+This functions provides simple websocket client capabilities.
+
+## State
+
+The `useWebSocket` function exposes the following reactive state:
+
+```js
+import { useWebSocket } from 'vue-use-web';
+
+const { state, data } = useWebSocket('ws://websocketurl');
+```
+
+| State | Type          | Description                                                                                             |
+| ----- | ------------- | ------------------------------------------------------------------------------------------------------- |
+| state | `Ref<string>` | The current websocket state, can be only one of: 'OPEN', 'CONNECTING', 'CLOSING', 'CLOSED'              |
+| data  | `Ref<object>` | Reference to the latest data received via the websocket, can be watched to respond to incoming messages |
+
+## Methods
+
+`useWebSocket` exposes the following methods:
+
+```js
+import { useWebSocket } from 'vue-use-web';
+
+const { send, close } = useWebSocket('ws://websocketurl');
+```
+
+| Method | Signature                                  | Description                                  |
+| ------ | ------------------------------------------ | -------------------------------------------- |
+| send   | `(data: any) => void`                      | Sends data through the websocket connection. |
+| close  | `(code?: number, reason?: string) => void` | Closes the websocket connection gracefully.  |
+
+## Example
+
+```vue
+<template>
+  <div>
+    <input type="text" v-model="message" />
+    <button @click="send(message)">Send</button>
+    <button @click="close()">Close</button>
+    State: {{ state }}
+    List of messages:
+    <pre>{{ messages }}</pre>
+  </div>
+</template>
+
+<script>
+import { ref, watch } from '@vue/composition-api';
+import { useWebSocket } from 'vue-use-web';
+
+export default {
+  setup() {
+    const { data, state, send, close } = useWebSocket('ws://demos.kaazing.com/echo');
+    const message = ref('');
+    const messages = ref([]);
+    watch(
+      data,
+      val => {
+        messages.value.push(val);
+      },
+      { lazy: true }
+    );
+
+    return { state, send, close, data, message, messages };
+  }
+};
+</script>
+```
+
+## Demo
+
+TODO: Cool Chat app maybe

src/WebSocket.ts

@@ -0,0 +1,44 @@
+import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api';
+
+export function useWebSocket(url: string) {
+  const data: Ref<any> = ref(null);
+  const state: Ref<'OPEN' | 'CONNECTING' | 'CLOSING' | 'CLOSED'> = ref('CONNECTING');
+  let ws: WebSocket;
+  const close: typeof ws.close = function close(code, reason) {
+    if (!ws) return;
+
+    ws.close(code, reason);
+  };
+
+  const send: typeof ws.send = function send(data) {
+    if (!ws) return;
+
+    ws.send(data);
+  };
+
+  onMounted(() => {
+    ws = new WebSocket(url);
+    ws.onopen = () => {
+      state.value = 'OPEN';
+    };
+
+    ws.onclose = ws.onerror = () => {
+      state.value = 'CLOSED';
+    };
+
+    ws.onmessage = (e: MessageEvent) => {
+      data.value = e.data;
+    };
+  });
+
+  onUnmounted(() => {
+    ws.close();
+  });
+
+  return {
+    data,
+    state,
+    close,
+    send
+  };
+}

src/index.ts

@@ -15,5 +15,6 @@ export * from './Network';
 export * from './PreferredColorScheme';
 export * from './PreferredLanguages';
 export * from './Script';
+export * from './WebSocket';
 export * from './WindowScrollPosition';
 export * from './WindowSize';