Chat on the terminal

Build a realtime chat in your terminal 💬

Demo ⏯️ Code 👨‍💻

This is a quick tutorial which helps you build a realtime chat on your terminal - using socket.io - we can build and test super quick thanks to repl.it's repl.run platform - which displays a terminal on the web 🌐 👨‍💻

⚙️ Dependencies

We're only using one external dependency in this project - socket.io, which helps us communicate realtime between several clients and a server.

Along with this, we'll be using node's built in readline which lets us collect input from the terminal.

💁 Setting up the server

Because we're using socket.io - we need to spin up a small server to relay messages too! Just fork this, and you'll be all set 👉 repl.it/@jajoosam/chat-server

io.on('connection', function (socket) {
	socket.on('message', function(data) {
		io.emit("msg", data);
	});
});

This small block of code listens for any messages from any user, and then broadcasts that message to all the users - that simple ✨

💬 Let's get chatting

Let's start off by forking this repl - I've already declared dependencies to make things simple. On line 3, replace the url with that of the server you just created.

Whenever a user connects, let's ask them for their name. Put this code inside the socket.connect block.

rl.question(`What's your name? `, (answer) => {
			socket.emit("message", `👤  : ${answer} has joined the chat`);
			id = answer;
			chat();
});

We're sending a message which says a new user has joined the chat, and storing their name for later reference. As you can see - we're also calling the chat function, which is currently empty - let's change that!

rl.question("» ", (answer) => {
    // "» " Gives a prompt for the user
    socket.emit("message",  `${id}: ${answer}`);
    chat();
});

We're prompting for a user to type out a message, then sending it back to the server - also at the end - we're calling chat again in case they want to send more messages ⌨️

🖨️ Printing out messages

If you try running this code now, you'll see that no message you type is printed in the terminal. Let's create a new event listener inside socket.connect to listen for messages 👇

socket.on('msg', function(data){
    console.log("\n" + data);
    chat();
});

Whenever the server broadcasts a new message to us, we print it out to the console - and call chat again - so that our user can keep sending messages!

🛠️ Hacking this

It was pretty simple to build this chat - but it doesn't seem like a conventional one in many ways. Luckily, you can change that 😄

Here are some ideas to tinker with this project 👇

• Let everyone know when a user is typing ⌨️
• Don't print out messages sent by the same user repeatedly 🔄
• Add color + formatting to the chat with chalk 🌈
• Take realtime to the next level by broadcasting every character as it's typed 💡

Check out this open source project for more ideas!

Here's the code for the completed project (with a few tweaks!) - feel free to refer to it 👨‍💻

https://repl.it/@jajoosam/chat

Now, go ahead and share what you've built on repl talk, and tag me - @jajoosam 👤