In this article, we'll show you how to build a real-time application with WebSockets. We'll go over the basics of WebSockets and how to use them to create a simple chat application.
WebSockets are a protocol that allows for full-duplex communication between a client and a server. This means that both the client and the server can send and receive data at the same time. WebSockets are especially well-suited for applications that require real-time communication, such as chat applications, multiplayer games, and collaboration tools.
To use WebSockets in your application, you'll need to create a WebSocket server. You can do this with any web server that supports the WebSocket protocol. For the purposes of this article, we'll be using the Node.js web server.
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({
port: 8080
});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('Received: %s', message);
});
ws.send('Hello, world!');
});
This code creates a WebSocket server that listens on port 8080 for incoming connections. When a connection is made, the server creates a WebSocket instance for that connection. The server then listens for messages from the client. When a message is received, it is logged to the console. The server also sends a message to the client when the connection is first made.
The WebSocket server can be run with the Node.js command-line interface.
node server.js
Now that we have a WebSocket server up and running, we need to create a WebSocket client to connect to it. For the purposes of this article, we'll be using the browser-based JavaScript client.
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
ws.send('Hello, world!');
};
ws.onmessage = function(event) {
console.log(event.data);
};
This code creates a WebSocket instance and connects it to the WebSocket server. The code also defines two event handlers. The first event handler is for the open
event. This event is fired when the connection is established. The second event handler is for the message
event. This event is fired when the server sends a message to the client.
Now that we have a WebSocket server and client set up, we can start sending and receiving messages. The send
method can be used to send messages from the client to the server. The onmessage
event handler can be used to receive messages from the server.
ws.send('Hello, world!');
ws.onmessage = function(event) {
console.log(event.data);
};
In this code, the send
method is used to send a message from the client to the server. The onmessage
event handler is used to receive the message from the server. The message is logged to the console.