feat: unique name per client

gmus/package.json

@@ -40,6 +40,7 @@
     "eslint-plugin-prettier": "^3.3.0",
     "jest-websocket-mock": "^2.2.0",
     "mock-socket": "^9.0.3",
+    "nanoid": "^3.1.20",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

gmus/src/hooks/socket.spec.tsx

@@ -5,6 +5,10 @@ import * as storageHooks from 'react-storage-hooks';
 
 import { useSocket } from './socket';
 
+jest.mock('nanoid', () => ({
+  nanoid: (): string => 'A5v3D',
+}));
+
 describe(useSocket.name, () => {
   afterEach(WS.clean);
 
@@ -56,12 +60,12 @@ describe(useSocket.name, () => {
       return renderResult;
     };
 
-    it('should create a new connection to the socket, using the client name in the query', async () => {
+    it('should create a new connection to the socket, using a unique client name in the query', async () => {
       expect.assertions(1);
       setupIdentify();
 
       const res = await server.connected;
-      expect(res.url).toBe('ws://my-api.url:1234/pubsub?client-name=my-client-name');
+      expect(res.url).toBe('ws://my-api.url:1234/pubsub?client-name=my-client-name-A5v3D');
     });
 
     it('should open a new socket', async () => {
@@ -128,13 +132,13 @@ describe(useSocket.name, () => {
       );
     });
 
-    it('should open a socket immediately, using the stored name', async () => {
+    it('should open a socket immediately, using a unique version of the stored name', async () => {
       expect.assertions(3);
       const { getByText } = render(<TestComponent />);
 
       const res = await server.connected;
 
-      expect(res.url).toBe('ws://my-api.url:1234/pubsub?client-name=my-stored-name');
+      expect(res.url).toBe('ws://my-api.url:1234/pubsub?client-name=my-stored-name-A5v3D');
 
       act(() => {
         fireEvent.click(getByText('Say hello!'));

gmus/src/hooks/socket.ts

@@ -1,9 +1,12 @@
+import { nanoid } from 'nanoid';
 import { useEffect, useRef, useState } from 'react';
 import { useStorageState } from 'react-storage-hooks';
 
 import { socketKeepaliveTimeout } from '../constants/system';
 import { getPubsubUrl } from '../utils/url';
 
+const getUniqueName = (name: string): string => `${name}-${nanoid(5)}`;
+
 export function useSocket(): {
   name: string | null;
   onIdentify: (name: string) => void;
@@ -26,7 +29,7 @@ export function useSocket(): {
     if (tempName) {
       setConnecting(true);
 
-      ws = new WebSocket(`${getPubsubUrl()}?client-name=${tempName}`);
+      ws = new WebSocket(`${getPubsubUrl()}?client-name=${getUniqueName(tempName)}`);
 
       ws.onopen = (): void => {
         if (!cancelled && ws && ws.readyState === ws.OPEN) {

gmus/yarn.lock

@@ -7444,6 +7444,11 @@ nanoid@^3.1.18:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.18.tgz#0680db22ab01c372e89209f5d18283d98de3e96d"
   integrity sha512-rndlDjbbHbcV3xi+R2fpJ+PbGMdfBxz5v1fATIQFq0DP64FsicQdwnKLy47K4kZHdRpmQXtz24eGsxQqamzYTA==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"