Skip to content
← Back to Community
Chat on the terminal
Profile icon
h
has Hacker Plan
jajoosam

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 πŸ‘€

Voters
Profile icon
CameranRith
Profile icon
hafiz573
Profile icon
milkshakegum
Profile icon
TheMerDragon
Profile icon
Qubert
Profile icon
RycerzDobry
Profile icon
Aventure20
Profile icon
sashadevsky
Profile icon
hdr1453
Profile icon
YVSimeonova19
Comments
hotnewtop
Profile icon
EpicGamer007

Repl.run is no more :(

Profile icon
zaydi

rip so sad ): neither is open in the new tab for python rip [email protected]

Profile icon
Paultheriault

"Swastika" as a username? Isn't that toeing the line of political correctness a bit?

Profile icon
zacharymetz
Profile icon
Lathryx

@zacharymetz Look at the GIF at the top of the page. :/

Profile icon
tirthyme

@Paultheriault it's a common name for Indians

Profile icon
Ridgeity

@Paultheriault I think you're taking it a little too seriously, it was probably just the first word he thought of. he's not making a statement, is he? correct me if I'm wrong

Profile icon
immjs

@Ridgeity Quoting wikipedia:
"In many Western countries, the swastika is now viewed as a symbol of racial supremacism and intimidation because of its association with Nazism"

Profile icon
AliceInDystopia

@InforMatheMathe key word, western, in most asian countries swastika is a peace symbol

Profile icon
firefish

swastika is a peace symbol

@AliceInDystopia Ah, well actually the peace symbol is the back-to-front swastika

Profile icon
iitachi

@Paultheriault are u taking it a bit too far XD

Profile icon
codemeist

@Paultheriault Bro what in the world

Profile icon
AliceInDystopia

@firefish both are peace symbols, the regular version is used by hindus

Profile icon
Nayoar

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

Profile icon
jajoosam

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

Profile icon
dugo3number3

@Nayoar You could also use the `` string (not sure what it's called in js but in python it's called an fstring)

Profile icon
mollthecoder

@dugo3number3 JS doesn't have an fstring.

Profile icon
Nayoar

@mollthecoder it essentially does, there's just no f

`A string with a variable: ${myVar}`
Profile icon
dugo3number3

@Nayoar exactly

Profile icon
CrazyVideoGamer

@dugo3number3 they're called template literals

Profile icon
notoriouscode

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 :)

Profile icon
code913

@KhalilNourElDin node readline is potato

Profile icon
SigridLindh

Γ₯

Profile icon
AnthonyMouse

This is great! Would you like to work on a secret project with Battledash, RYANTADIPARTH, and I?

Profile icon
Guidlin

Hello, this tutorial was very useful for me, but I've got a problem...
I'm wondering how to make a mute command on this chat.
I would appreciate any help! :)

Profile icon
benclarkk

ok

Profile icon
vangood

console

Profile icon
Digin

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

Profile icon
dugo3number3

@XanmanGaming follow the tutorial

Profile icon
berriesrhino

Say I wanted all links on the page to be white, and not underlined. But on one particular instance, I wanted to add another style. Wouldn't it be awesome if there was an easy way to do that? Think no more because I have it right here: Super Mario Bros

.link {
color: white;
text-decoration: none;
}

.nav-bar {
.link; // Imports all style from the .link
font-size: 20px; // Adds font size that was not in .link that we needed
}

Profile icon
MeharMakkar

This is awesome!

Profile icon
TheWorld6

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument('--no-sandbox')
chrome_options.add_argument('--disable-dev-shm-usage')

driver = webdriver.Chrome(options=chrome_options)
driver.get("https://google.com/")

Profile icon
isaiah08
Profile icon
TheWorld6

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument('--no-sandbox')
chrome_options.add_argument('--disable-dev-shm-usage')

driver = webdriver.Chrome(options=chrome_options)
driver.get("https://google.com/")

Profile icon
NoahPython3

Nice!

Profile icon
[deleted]

Hi

Profile icon
lilavat9

I wanna make a Free.24/7 discord bot

Profile icon
codermaster8

Interesting it’s a very nice communication

Profile icon
OrderSOL

56

Profile icon
nhlanhla1997

i too come to a school for code its me nhlanhla

Profile icon
nhlanhla1997

hi i need to about code someone can hepple me

Profile icon
GeneralGaymer
Profile icon
ShouqMohammed2

Hi guys anyone can help me

Profile icon
zaydi

Ok

Profile icon
wulcato

sad

Profile icon
EmmanuelRoigt

cool

Profile icon
muffinman12345

it says cannot GET /

Profile icon
ArnoWillems
Profile icon
SirJaydenOMG

cool

Profile icon
ParrotDev

@jajoosam How would we make this an actual chat website? repl.run is broken :(