Add composable onSocketEvent()

This will subscribe to a socket.io event before the component is mounted
and will unsubscribe before the component is unmounted.

Usage:

setup() {
  onSocketEvent('my-event', (data) => {
      ...
    })
}

Author: e-tobi

src/__tests__/composables.spec.js

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import { useSocket, onSocketEvent } from '../composables';
+import Main from '../plugin';
+import io from '../__mocks__/socket.io-client';
+
+it('useSocket() injects $socket', () => {
+  let injectedSocketExtension;
+  const wrapper = mount({
+    render: () => null,
+    setup() {
+      injectedSocketExtension = useSocket();
+    },
+  }, { global: { plugins: [[Main, io('ws://localhost')]] } });
+  expect(injectedSocketExtension).toBe(wrapper.vm.$socket);
+});
+
+describe('onSocketEvent()', () => {
+  it('subscribes to the event', () => {
+    const spy = jest.fn();
+    const socket = io('ws://localhost');
+    mount({
+      render: () => null,
+      setup() {
+        onSocketEvent('event', spy);
+      },
+    }, { global: { plugins: [[Main, socket]] } });
+    socket.fireServerEvent('event', 'data');
+    expect(spy).toHaveBeenCalledWith('data');
+  });
+
+  it('unsubscribes before unmounted', () => {
+    const spy = jest.fn();
+    const socket = io('ws://localhost');
+    const wrapper = mount({
+      render: () => null,
+      setup() {
+        onSocketEvent('event', spy);
+      },
+    }, { global: { plugins: [[Main, socket]] } });
+    wrapper.unmount();
+    socket.fireServerEvent('event', 'data');
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

src/__tests__/plugin.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { createApp, inject } from 'vue';
 import { SocketExtensionKey } from '..';
-import Main, { useSocket } from '../plugin';
+import Main from '../plugin';
 import io from '../__mocks__/socket.io-client';
 
 it('should be vue plugin (is an object with `install` method)', () => {
@@ -108,17 +108,6 @@ describe('.install()', () => {
     }, { global: { plugins: [[Main, io('ws://localhost')]] } });
     expect(injectedSocketExtension).toBe(wrapper.vm.$socket);
   });
-
-  it('provides a useSocket() helper function to inject $socket', () => {
-    let injectedSocketExtension;
-    const wrapper = mount({
-      render: () => null,
-      setup() {
-        injectedSocketExtension = useSocket();
-      },
-    }, { global: { plugins: [[Main, io('ws://localhost')]] } });
-    expect(injectedSocketExtension).toBe(wrapper.vm.$socket);
-  });
 });
 
 describe('.defaults', () => {

src/composables.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { inject, onBeforeMount, onBeforeUnmount } from 'vue';
+
+const SocketExtensionKey = Symbol('$socket');
+
+const useSocket = () => inject(SocketExtensionKey);
+
+function onSocketEvent(event, callback) {
+  const socket = useSocket();
+  onBeforeMount(() => socket.$subscribe(event, callback));
+  onBeforeUnmount(() => socket.$unsubscribe(event));
+}
+
+export { SocketExtensionKey, useSocket, onSocketEvent };

src/index.js

@@ -1,4 +1,5 @@
-import plugin, { useSocket, SocketExtensionKey } from './plugin';
+import plugin from './plugin';
+import { useSocket, SocketExtensionKey } from './composables';
 
 export default plugin;
 export { useSocket, SocketExtensionKey };

src/plugin.js

@@ -1,10 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { ref, inject } from 'vue';
+import { ref } from 'vue';
 import Observe from './Observe';
 import GlobalEmitter from './GlobalEmitter';
 import createMixin from './createMixin';
 import { isSocketIo } from './utils';
 import defaults from './defaults';
+import { SocketExtensionKey } from './composables';
 
 /**
  * @param {Vue} app
@@ -53,8 +54,6 @@ function defineSocketIoClient(socket, obj) {
   });
 }
 
-const SocketExtensionKey = Symbol('$socket');
-
 function install(app, socket, options) {
   if (!isSocketIo(socket)) {
     throw new Error('[vue-socket.io-ext] you have to pass `socket.io-client` instance to the plugin');
@@ -72,8 +71,4 @@ function install(app, socket, options) {
   app.provide(SocketExtensionKey, $socket);
 }
 
-const useSocket = () => inject(SocketExtensionKey);
-
 export default { defaults, install };
-
-export { useSocket, SocketExtensionKey };

types/index.d.ts

@@ -34,4 +34,4 @@ export interface SocketExtension {
 
 export declare const SocketExtensionKey: InjectionKey<SocketExtension>
 export declare const useSocket: () => SocketExtension
-
+export declare const onSocketEvent: (event: string, fn: Function) => void