Chat on the terminal
Chat on the terminal
Build a realtime chat in your terminal π¬
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 message
s 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 π€
"Swastika" as a username? Isn't that toeing the line of political correctness a bit?
@Paultheriault wut lol
@zacharymetz Look at the GIF at the top of the page. :/
@Paultheriault it's a common name for Indians
@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
@InforMatheMathe key word, western, in most asian countries swastika is a peace symbol
swastika is a peace symbol
@AliceInDystopia Ah, well actually the peace symbol is the back-to-front swastika
@Paultheriault are u taking it a bit too far XD
@Paultheriault Bro what in the world
@firefish both are peace symbols, the regular version is used by hindus
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!
@Nayoar You could also use the `` string (not sure what it's called in js but in python it's called an fstring)
@dugo3number3 JS doesn't have an fstring.
@mollthecoder it essentially does, there's just no f
`A string with a variable: ${myVar}`
@Nayoar exactly
@dugo3number3 they're called template literals
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 :)
@KhalilNourElDin node readline is potato
This is great! Would you like to work on a secret project with Battledash, RYANTADIPARTH, and I?
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! :)
console
all the chat-starter does is print some socket stuff in green help
@XanmanGaming follow the tutorial
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
}
This is awesome!
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/")
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/")
Nice!
Hi
I wanna make a Free.24/7 discord bot
Interesting itβs a very nice communication
56
i too come to a school for code its me nhlanhla
hi i need to about code someone can hepple me
Hi guys anyone can help me
Ok
sad
cool
it says cannot GET /
cool
Repl.run is no more :(
rip so sad ): neither is open in the new tab for python rip [email protected]