Merge pull request #4 from dittonjs/jd/add-websockets

Jd/add websockets

2 files changed, 88 insertions, 0 deletions

diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 4b1ab46..405a968 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -4,6 +4,7 @@ import { ApiContext } from '../../utils/api_context';
 import { AuthContext } from '../../utils/auth_context';
 import { RolesContext } from '../../utils/roles_context';
 import { Button } from '../common/button';
+import { Ping } from './ping';
 
 export const Home = () => {
   const [, setAuthToken] = useContext(AuthContext);
@@ -42,6 +43,9 @@ export const Home = () => {
           Admin
         </Button>
       )}
+      <section>
+        <Ping />
+      </section>
     </div>
   );
 };
diff --git a/client/components/home/ping.jsx b/client/components/home/ping.jsx
new file mode 100644
index 0000000..6166921
--- /dev/null
+++ b/client/components/home/ping.jsx
@@ -0,0 +1,84 @@
+import { useState, useEffect, useRef, useContext } from 'react';
+import { Button } from '../common/button';
+import { io } from 'socket.io-client';
+import { AuthContext } from '../../utils/auth_context';
+
+export const Ping = () => {
+  const [pings, setPings] = useState([]);
+  const [key, setKey] = useState('defaultkey');
+  const [currentRoom, setCurrentRoom] = useState(null);
+  const [authToken] = useContext(AuthContext);
+  const [socket, setSocket] = useState(null);
+
+  useEffect(() => {
+    // instantiates a socket object and initiates the connection...
+    // you probably want to make sure you are only doing this in one component at a time.
+    const socket = io({
+      auth: { token: authToken },
+      query: { message: 'I am the query ' },
+    });
+
+    // adds an event listener to the connection event
+    socket.on('connect', () => {
+      setSocket(socket);
+    });
+
+    // adds event listener to the disconnection event
+    socket.on('disconnect', () => {
+      console.log('Disconnected');
+    });
+
+    // recieved a pong event from the server
+    socket.on('pong', (data) => {
+      console.log('Recieved pong', data);
+    });
+
+    // IMPORTANT! Unregister from all events when the component unmounts and disconnect.
+    return () => {
+      socket.off('connect');
+      socket.off('disconnect');
+      socket.off('pong');
+      socket.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    // if our token changes we need to tell the socket also
+    if (socket) {
+      // this is a little weird because we are modifying this object in memory
+      // i dunno a better way to do this though...
+      socket.auth.token = authToken;
+    }
+  }, [authToken]);
+
+  if (!socket) return 'Loading...';
+
+  const sendPing = () => {
+    // sends a ping to the server to be broadcast to everybody in the room
+    currentRoom && socket.emit('ping', { currentRoom });
+  };
+
+  const joinRoom = () => {
+    // tells the server to remove the current client from the current room and add them to the new room
+    socket.emit('join-room', { currentRoom, newRoom: key }, (response) => {
+      console.log(response);
+      setCurrentRoom(response.room);
+    });
+  };
+
+  return (
+    <>
+      <header>Ping: {currentRoom || '(No room joined)'}</header>
+      <section>
+        <input
+          type="text"
+          className="border-2 border-gray-700 p-2 rounded"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+        />
+        <Button onClick={joinRoom}>Connect To Room</Button>
+        <Button onClick={sendPing}>Send Ping</Button>
+      </section>
+    </>
+  );
+};