zplusfour (830)

Hi, this is a tutorial about how to build a chat app

here is it @Leroy01010

Let's start

1. Libraries

We need socket.io to make a connection from user to a user.
And we need an express server, and also http.


const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

2. Socket.io connection

We need some lines of code, to make a websocket connection.

The first block of code is for the username (for the chat app) and then to send: 'Username joined the chat...'

The second block of code is the opposite of the first one.

The third block of code is about the message, when the user sends a message, it will send his message with the username and the date of the message.

The fourth code block (outside of the websocket connection) is the port listen handler.

io.sockets.on('connection', (socket) => {
  socket.on('username', function(username) {
    socket.username = username;
    io.emit('is_online', '🔵 <i>' + socket.username + ' joined the chat..</i>');

  socket.on('disconnect', (username) => {
    io.emit('is_online', '🔴 <i>' + socket.username + ' lefted the chat..</i>');

  socket.on('chat_message', (message) => {
    let time = new Date();
    io.emit('chat_message',`<i>${time.toLocaleTimeString()}</i><br>` +  '<strong>' + socket.username + '</strong>: ' + message);

// Server listen handler
server.listen(8080, ()=>{

4. Render the HTML file for the chat.

We need to add some lines before the socket connection.
To render the HTML chat app file.


app.get('/', function(req, res) {
  res.sendFile(__dirname + "/index.html");

5. Fill the index.html with code to make a chat app.

We need to use jQuery to make a form for the chat.


<!DOCTYPE html>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        form { background: #fff; padding: 3px; position: fixed; bottom: 0; width: 100%; border-color: #000; border-top-style: solid; border-top-width: 1px;}
        form input { border-style: solid; border-width: 1px; padding: 10px; width: 85%; margin-right: .5%; }
        form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; margin-left: 2%; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
    <script src="../../socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <body style="background: grey;">
      <header align="center">
    <ul id="messages"></ul>
    <form action="/" method="POST" id="chatForm">
      <input id="txt" autocomplete="off" autofocus="on" placeholder="Your message" /><button>Send</button>
            var socket = io.connect('https://chatorzo-2.zdev1.repl.co');
                socket.emit('chat_message', $('#txt').val());
                return false;
            socket.on('chat_message', function(msg){
            socket.on('is_online', function(username) {
            var username = prompt('Username:');
            socket.emit('username', username);

So we basically added some CSS and some javascript (jQuery) to:

  • Make it responsive and beautiful.
  • Connect the socket code to the HTML file.

And that's it

Have a great day!

Source code: https://repl.it/@ZDev1/chatorzo-2

You are viewing a single comment. View All
nngggaming (0)

Kind of good and bad... good: it’s a wonderful chat app. Bad: it is connected through all repls? I followed all the steps above, and sent some messages, at the same time opened up another tab with your repl and yeah saw the messages i sent...

Is there any way to make it more private(like only people with my repl project link can see the messages)?

zplusfour (830)

@nngggaming I have used Socket.IO
which it let's you to connect users to other users.
It is not a database, messages aren't saved in the database, only if someone joined the repl (if one of your family or friends or people on repl.it) can see messages on this web.