diff --git a/client/src/contexts/WebSocketProvider.tsx b/client/src/contexts/WebSocketProvider.tsx
index e8ef017..44d54c0 100644
--- a/client/src/contexts/WebSocketProvider.tsx
+++ b/client/src/contexts/WebSocketProvider.tsx
@@ -15,153 +15,38 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { WebSocketMessage, WebSocketMessageTable, WebSocketMessageType } from 'jami-web-common';
-import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useEffect, useMemo, useRef } from 'react';
 
+import { WebSocketClient } from '../services/WebSocketClient';
 import { apiUrl } from '../utils/constants';
 import { WithChildren } from '../utils/utils';
 import { useAuthContext } from './AuthProvider';
 
-type WebSocketCallback<T extends WebSocketMessageType> = (data: WebSocketMessageTable[T]) => void;
-
-type WebSocketCallbacks = {
-  [key in WebSocketMessageType]: Set<WebSocketCallback<key>>;
-};
-
-const buildWebSocketCallbacks = (): WebSocketCallbacks => {
-  const webSocketCallback = {} as WebSocketCallbacks;
-  for (const messageType of Object.values(WebSocketMessageType)) {
-    // TODO: type this properly to prevent mistakes
-    // The end result of the function is still typed properly
-    webSocketCallback[messageType] = new Set() as any;
-  }
-  return webSocketCallback;
-};
-
-type BindFunction = <T extends WebSocketMessageType>(
-  type: T,
-  callback: (data: WebSocketMessageTable[T]) => void
-) => void;
-type SendFunction = <T extends WebSocketMessageType>(type: T, data: WebSocketMessageTable[T]) => void;
-
 export interface IWebSocketContext {
-  bind: BindFunction;
-  unbind: BindFunction;
-  send: SendFunction;
+  bind: WebSocketClient['bind'];
+  unbind: WebSocketClient['unbind'];
+  send: WebSocketClient['send'];
 }
 
 export const WebSocketContext = createContext<IWebSocketContext | undefined>(undefined);
 
 export default ({ children }: WithChildren) => {
-  const [isConnected, setIsConnected] = useState(false);
-  const webSocketRef = useRef<WebSocket>();
-  const callbacksRef = useRef<WebSocketCallbacks>(buildWebSocketCallbacks());
-  const reconnectionTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const webSocketClientRef = useRef<WebSocketClient>(new WebSocketClient());
 
   const { token: accessToken } = useAuthContext();
 
-  const bind: BindFunction = useCallback((type, callback) => {
-    const callbacks = callbacksRef.current[type];
-    callbacks.add(callback);
-  }, []);
-
-  const unbind: BindFunction = useCallback((type, callback) => {
-    const callbacks = callbacksRef.current[type];
-    callbacks.delete(callback);
-  }, []);
-
-  const send: SendFunction = useCallback(
-    (type, data) => {
-      if (isConnected) {
-        webSocketRef.current?.send(JSON.stringify({ type, data }));
-      }
-    },
-    [isConnected]
-  );
-
-  const connect = useCallback(() => {
-    const url = new URL(apiUrl);
-    url.protocol = 'ws:';
-    url.searchParams.set('accessToken', accessToken);
-
-    const webSocket = new WebSocket(url);
-
-    const close = (reconnect = false) => {
-      console.debug('WebSocket disconnected');
-      setIsConnected(false);
-      for (const callbacks of Object.values(callbacksRef.current)) {
-        callbacks.clear();
-      }
-      if (reconnect) {
-        reconnectionTimeoutRef.current = setTimeout(connect, 2000);
-      }
-    };
-
-    webSocket.onopen = () => {
-      console.debug('WebSocket connected');
-      setIsConnected(true);
-    };
-
-    webSocket.onclose = () => close(true);
-
-    webSocket.onmessage = <T extends WebSocketMessageType>(event: MessageEvent<string>) => {
-      const messageString = event.data;
-      console.debug('WebSocket received message', messageString);
-
-      const message: WebSocketMessage<T> = JSON.parse(messageString);
-      if (!message.type || !message.data) {
-        console.warn('WebSocket message is not a valid WebSocketMessage (missing type or data fields)');
-        return;
-      }
-
-      if (!Object.values(WebSocketMessageType).includes(message.type)) {
-        console.warn(`Invalid WebSocket message type: ${message.type}`);
-        return;
-      }
-
-      const callbacks = callbacksRef.current[message.type];
-      for (const callback of callbacks) {
-        callback(message.data);
-      }
-    };
-
-    webSocket.onerror = (event: Event) => {
-      console.error('WebSocket errored', event);
-    };
-
-    webSocketRef.current = webSocket;
-
-    return () => {
-      // Cancel any previous reconnection attempt
-      if (reconnectionTimeoutRef.current !== undefined) {
-        clearTimeout(reconnectionTimeoutRef.current);
-        reconnectionTimeoutRef.current = undefined;
-      }
-
-      // Setup a closure without reconnection
-      webSocket.onclose = () => close();
-
-      switch (webSocket.readyState) {
-        case webSocket.CONNECTING:
-          webSocket.onopen = () => webSocket.close();
-          break;
-        case webSocket.OPEN:
-          webSocket.close();
-          break;
-      }
-    };
+  useEffect(() => {
+    webSocketClientRef.current.connect(apiUrl, accessToken);
   }, [accessToken]);
 
-  useEffect(connect, [connect]);
-
   const value: IWebSocketContext = useMemo(
     () => ({
-      bind,
-      unbind,
-      send,
+      bind: webSocketClientRef.current.bind.bind(webSocketClientRef.current),
+      unbind: webSocketClientRef.current.unbind.bind(webSocketClientRef.current),
+      send: webSocketClientRef.current.send.bind(webSocketClientRef.current),
     }),
-    [bind, unbind, send]
+    []
   );
 
-  return <WebSocketContext.Provider value={isConnected ? value : undefined}>{children}</WebSocketContext.Provider>;
+  return <WebSocketContext.Provider value={value}>{children}</WebSocketContext.Provider>;
 };