Create Multiplayer Websites w/out a Server!
Create Multiplayer websites with Socket.IO without setting up your own Node.js Server!
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
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
This will add an
io object in the global scope of the page, exposing the Socket.IO Client API
📡 Connecting to our Server
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 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
👂 Receiving Messages
You can receive messages via
🚪 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"
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:
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
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)