Create Multiplayer Websites w/out a Server!
h
zakaton

Create Multiplayer websites with Socket.IO without setting up your own Node.js Server!

Socket.io is a popular Node.js package for creating multi-user applications (messaging, games, collaborative editing, etc).

However, you'll need to setup a Node.js server to start connecting users. That's why we set up our own Socket.IO Server so you don't have to!

In this tutorial you'll learn how to do the following:
1. Connect to our Socket.IO server
2. Send messages between users
3. Create a simple chat application


Table of Contents:

📦 Setting up
📡 Connecting to our Server
🗣️ Sending Messages
👂 Receiving Messages
🚪 Joining a Room
💬 Creating a Simple Chat Application
📥 Download our Template!
🙌 Possibilities


📦 Setting up

Create a new HTML, CSS, JS Repl

In your new Repl, add the Socket.IO package (type in "socket.io" in the Packages section in the sidebar and select the result titled "socket.io: node.js realtime framework server").

Alternatively, you can add the Socket.IO library manually by inserting the following <script></script> tag:

This will add an io object in the global scope of the page, exposing the Socket.IO Client API


📡 Connecting to our Server

Create a socket instance that represents your connection to our Node.js Socket.IO Server, passing in the url of the repl.it it's hosted at:

Once connected to the server, the socket instance will trigger the 'connect' event, which you can listen for using socket.on(eventName, callback):

Each socket instance has a unique socket.id property, which you can use to directly message others.


🗣️ ️️️Sending Messages

After connecting to our server, you can either send a message to everyone or message a user directly via socket.emit():


👂 Receiving Messages

You can receive messages via socket.on(eventName, callback):


🚪 Joining a Room

To prevent users in one repl receiving messages from users in another repl, you can join a room, allowing you to send messages to users in a particular room to limit who recieves it.


💬 Creating a Simple Chat Application

This assumes you've already done "Setting up" and "Connecting to our Server"

Add elements:

Send a post when they hit the "postButton" button:

Receive posts and add them to the chat:

Here you can play with the full chatroom repl that also adds the user's socket.id to each post so you can see who said what


📥 Download our Template!

We created a template repl.it webpage you can fork!

This template adds the Socket.IO Client API, creates a socket instance that connects to our server, and creates a room unique to your repl name.

You can send messages to other users on the same repl page using the location.href property as the room name:


🙌 Possibilities

Not only can you send messages between users on the same repl, but you can literally send messages to anyone connected to our Socket.IO Server! What does this mean?

This means you can create repl's that interact with other repl's, where one repl can send a message to users in another repl by specifying that repl's url as the room. Or you can just emit a message to all users on all repls using socket.emit('message', myMessage).

You can then imagine a repl's set of message names as its API. For instance, you can create a repl that sends messages to our chat application repl, adding extra functionality like automated messaging. A repl could also join the chat repl's room and listen for posts, e.g. to display a nicer UI for displaying posts.

Imagine creating a multiplayer game where players message player actions (movement, shooting, etc). A third-party repl could also be listening for these messages and create a scoreboard or map of the players that people could use to visualize gameplay. Players can also use third-party repl's that can produce messages on behalf of the player (like a third-party turbo controller for a game console)

You are viewing a single comment. View All
AdriaDonohue

nice