WebSocket is an application layer protocol that allows two-way communication between a client and a server. WebSocket protocol works first by creating a handshake and then a message framing implemented over TCP rather than basic HTTP.
WebSockets and other similar technologies such as SSE (Server-Sent Events) and WebRTC are useful in applications where the server needs to keep an open connection to the connected clients. A good example of WebSockets used in applications is a chat application, online multiplayer games, and real-time tools such as analytics and collaboration tools.
WebSockets provides us with a full-duplex, bidirectional connection between the server and the connected clients over the Web. That means both the server and the client can push data once there is an established connection.
If you wish to learn more about HTTP, WebSocket, and SSEs, check out other tutorials on this site explaining their differences.
NOTE: Before we begin, we assume you are familiar with basic networking concepts such as HTTP and HTTP requests. To implement the concepts in this tutorial with a degree of ease, you need to have basic Python and JavaScript Programming knowledge.
Step 1: Environment Setup
Let us begin to implement a simple WebSocket server to use the browser as the client to connect to the server.
It is good to note that the purpose of this implementation is not to build a massive application but to give you a basic understanding of how you can use python and JavaScript to create WebSocket Applications.
For this, we will need to have Python installed, preferably Python 3.6+.
We will also use the WebSocket package
Once you have Python installed, use pip to install the WebSocket package using the command below:
pip3 install websocketsOnce you have the WebSockets package installed, we can begin creating the server and a client to connect.
Step 2: Creating the Server
Start by creating a directory where we are going to serve the application—call it WebSocket.
Inside the directory, create a file and call it server.py
Inside the server.py file, add the following lines of code that implement a simple server on the / URL.
import asyncio
import websockets
# create handler for each connection
async def handler(websocket, path):
data = await websocket.recv()
reply = f"Data recieved as: {data}!"
await websocket.send(reply)
start_server = websockets.serve(handler, "localhost", 8000)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()Inside the server file, we import the required packages—in this case, asyncIO and WebSockets.
Next, we create a handler that takes the arguments WebSocket and path. The WebSocket represents the URL of the server (localhost:8000). The path is the URI for the handler—in our case, the URI is /
We then proceed to wait for the incoming connection and the message. With the data received, we implement an action, for our case, a simple response with the contents of the received data.
Step 3: Creating a Client
Let us now try to implement a simple client to connect to the server. We will use the Browser console as the client to preserve the simplicity of the tutorial.
Create a file and call it client.html. Inside the file, add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocker Client</title>
</head>
<body>
<button onclick="contactServer">Click Here</button>
</body>
<script>
const socket = new WebSocket('ws://localhost:8000');
socket.addEventListener('open', function (event) {
socket.send('Connection Established');
});
socket.addEventListener('message', function (event) {
console.log(event.data);
});
const contactServer = () => {
socket.send("Initialize");
}
</script>
</html>Save the file and open it in the browser.
To test if the connection is working, click the button and check the console for the server response.
Once you click the button, a message is sent to the server. The server then responds with the contents of the message, indicating that the connection is established.
Conclusion
For this tutorial, we saw how to use Python WebSockets package to implement a simple WebSocket connection.
