1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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>
</>
);
};
|
