Introduction to Socket.IO
Socket.IO is a powerful library that enables real-time, bidirectional, and event-based communication between web clients and servers. It operates over any protocol, which is ideal for building real-time applications with various kinds of tech stacks. Here, we will introduce you to its most crucial and commonly used APIs along with code snippets to give you a comprehensive understanding of how to use Socket.IO effectively.
Setting Up Socket.IO
First, let’s set up a basic Socket.IO server and client application:
// Server-side: app.js
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
http.listen(3000, () => {
console.log('Listening on *:3000');
});
// Client-side: index.html
<!doctype html>
<html>
<head>
<title>Socket.IO Client</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</head>
<body>
</body>
</html>
API Examples
Socket.on
Used to listen for incoming events:
socket.on('message', (data) => {
console.log('Message received:', data);
});
Socket.emit
Sends an event to the server:
socket.emit('message', 'Hello server!');
Socket.broadcast
Broadcasts an event to all other sockets except the sender:
socket.broadcast.emit('message', 'Hello everyone except sender');
Socket.join
Joins the socket to a room:
socket.join('room1');
Socket.leave
Leaves a room:
socket.leave('room1');
Application Example
Building a simple chat application using Socket.IO:
// Server: chat-server.js
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
http.listen(3000, () => {
console.log('Listening on *:3000');
});
// Client: chat.html
<!doctype html>
<html>
<head>
<title>Socket.IO Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
document.addEventListener('DOMContentLoaded', () => {
var form = document.getElementById('form');
var input = document.getElementById('input');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', (msg) => {
var item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" />
<button>Send</button>
</form>
</body>
</html>
With these code samples, you can create more complex real-time applications using Socket.IO. It is a versatile and robust library that greatly enhances the capabilities of JavaScript applications.
Hash: 571cd7d209a29e206da7fb76c5429c752a143821535f2c0b42f3117cc4aaae8d
