#9 WebSocket/Node project ramblings

So... I tried to start implementing a multiplayer version of the high-card game demo.

But I felt a bit lost & overwhelmed. 🤯

I know how to implement a basic chat, but when you have to add game state complexity and the need for different rooms...

I'll try to express my thoughts here:

Socket.io

Socket.io recently got a new version 2 => 3

https://socket.io/docs/v3/migrating-from-2-x-to-3-0/index.html

Steps I know

1. Setup your server

• Add socket.io package to your server (yarn add socket.io)

• Combination with an HTTP server (Express)

2. Server connect & disconnect

• Listen for connections to the server

• When you receive a connection you will receive a unique socket object you can use to communicate with that particular client (Every socket connection has a unique id)

• Events on connect / disconnect

3. Client connect

• Load socket.io client library (with script import or NPM)

• Create a server connection

If you are connecting from the same server/domain
const socket = io.connect(`/`);
// or 
const socket = io();

If you are connecting to a different (external) server
const socket = io.connect(`https://yourexternalserverlink.com`);
// or 
const socket = io(`https://yourexternalserverlink.com`);

socket.on(`connect`, () => {
 //code
});

4.a. Send from client to server

Client: (sending)

socket.emit(`nameOfTheEvent`, `dataYouWantToSend`); 

Server: (receiving)

socket.on(`nameOfTheEvent`, receivedData => {
 console.log(`received: ${receivedData}`)
});

4.b. Send from server to client

Server: (sending)

socket.emit(`nameOfTheEvent`, `dataYouWantToSend`); 

Client: (receiving)

socket.on(`nameOfTheEvent`, receivedData => {
 console.log(`received: ${receivedData}`)
});

As you can see, the code is the same for sending to client from server and sending to server from client.

---

Server Emits

socket.emit("test", "Hello") => "Hello" ONLY to the sender

socket.broadcast.emit("test", "Hello") => "Hello" to all the clients BUT the sender

io.emit("test", "Hello") => "Hello" to ALL the clients

On

socket.on("test", received => {code...}) => When certain socket is received, execute some code

You can send pictures and video files with sockets (encode and decode with base64, if you want to video stream, you will need webRTC)

io() => go to URL you're currently on

io(‘/path’) => go to URL/path like a heroku application

Socket.Io cheatsheet

https://socket.io/docs/v3/emit-cheatsheet/

---

My thoughts / questions / concerns / doubts

• Difference between socket & io? =>

  • If you want to send something from the client to everyone u usually use socket.emit() to send it to the server, the server then sends it to everyone with io.emit (or socket.broadcast.emit). I think the client never uses io.something().
    

• At this moment, I pass static HTML to my express server. Maybe when I want to use Vue I can just use Heroku to host the server and link it to my Vue project externally. With something like this: this.socket = io.connect(`https://linkToMyHerokuServer.com)`;
  

• Could use something like 3 states: disconnected (when loading), connected (when showing login), app (show full app)
  

• What is the difference between io.emit & io.sockets.emit?

  • According to the documentation: It's an alias for the default (/) namespace. io.sockets.emit() is equivalent to io.of('/').emit()

---

Maybe useful links I haven't taken an in-depth look at

https://socket.io/docs/v3/client-api/index.html

Requirements of the demo game

• Rooms https://socket.io/docs/v3/rooms/

• Unique name

• Turn based (rotate every turn)

• Player List

Things I should look into

• What are namespaces?

• How to work with rooms

Next steps?

I think I might want to create an even simpler demo first ("hello world" -like difficulty), to better understand all the smaller parts before I add them all together.

Then I can try to implement it in my current high-card demo before eventually implementing it in my final project.