How to Make a Typing Indicator with Socket.IO

When developing real-time chat applications, showing users the "typing" status while someone is composing a message provides an important user experience. With Socket.IO, you can easily implement the typing indicator functionality. In this article, step-by-step instructions are provided for creating a typing indicator with Socket.IO.

The Logic Behind Typing Indicator with Socket.IO

Socket.IO enables bidirectional, real-time data communication between client and server. The basic logic of adding a typing indicator is to send events indicating that a user has started and/or stopped typing, and to listen for these events on the client to display them to the relevant users. This way, we can show the "user is typing" information in real time.

Preparing the Server Code

First, make sure you have Socket.IO installed in a Node.js environment. On the server side, you can use a structure like the following for the typing indicator event:

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    socket.on('typing', (username) => {
        socket.broadcast.emit('typing', username);
    });
    socket.on('stopTyping', (username) => {
        socket.broadcast.emit('stopTyping', username);
    });
});

server.listen(3000, () => {
    console.log('Socket.IO server is running on port 3000');
});

Typing Indicator on the Client Side

On the client side, you need to trigger the relevant events when the user starts or stops typing in the input box. Add the Socket.IO client library to your page and review the example below:

<input type="text" id="message" placeholder="Type your message..." />
<div id="typing-indicator" style="display:none; color:gray;"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io();
    const input = document.getElementById('message');
    const indicator = document.getElementById('typing-indicator');
    let typing = false;
    let timeout;
    
    input.addEventListener('input', () => {
        if(!typing){
            socket.emit('typing', 'YourUsername');
            typing = true;
        }
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            socket.emit('stopTyping', 'YourUsername');
            typing = false;
        }, 1000);
    });

    socket.on('typing', (username) => {
        indicator.textContent = username + ' is typing...';
        indicator.style.display = '';
    });
    socket.on('stopTyping', (username) => {
        indicator.style.display = 'none';
    });
</script>

Things to Consider for Typing Indicator

In the code, we used the typing and stopTyping events. Each user should use their own unique username and this information should be sent correctly to the server. The timeout logic automatically hides the indicator if the user stops typing for a short period of time (for example, 1 second).

Conclusion

In summary, implementing a typing indicator with Socket.IO is quite practical and enhances the user experience in real-time chat applications. You can find the answer to how to make a typing indicator with Socket.IO in technical detail in this article. You can use the sample codes above to easily integrate it into your own projects.