Learn to Code via Tutorials on Repl.it

โ† Back to all posts
Chat on the terminal
h
jajoosam (583)

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 ๐Ÿ‘ค

Commentshotnewtop
KhalilNourElDin (3)

Really amazing!
But like one thing, if I'm typing and a person writes something it pushes my cursor all the way back, unsure why. I'm not the best with JS so yeahh
Please try to fix it because it's the last thing and it would be perfect!
Thanks :)

minx28 (153)

Hey! Nice tutorial but a few issues:
Firstly, it doesn't work, in that messages you send aren't actually posted. Easy fix: replace

rl.question("ยป ", (answer) => {
    // "ยป " Gives a prompt for the user
    socket.emit("message", buffer);
    chat();
});

with

rl.question("ยป ", (answer) => {
    // "ยป " Gives a prompt for the user
    socket.emit("message", answer); // <-- There - replace buffer with answer!
    chat();
});

and it should work fine!

Also, if you want it to display who posted the message, change socket.emit("message", answer); to socket.emit("message", id+": "+answer);

Awesome tutorial though, I'm no good with JS so I would never have been able to create something like this without a tutorial!

Repl
My chatroom

jajoosam (583)

@minx28 Ah, fixed this - thanks for the spot :)

duck132912 (44)

there is an error

XanmanGaming (0)

all the chat-starter does is print some socket stuff in green help