”;
WebSockets is a next-generation bidirectional communication technology for web applications which operates over a single socket.
WebSockets allow bidirectional communication which means both client and server can send data to eachother independently and simultaneously
After establishing a Web Socket connection with the web server, we can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.
Syntax
Following is the API which creates a new WebSocket object.
var Socket = new WebSocket(url, [protocol] );
Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.
Attributes of WebSocket
Following are the attribute of WebSocket object. Assuming we created Socket object as mentioned above.
| Attribute | Description |
|---|---|
| Socket.readyState |
The readonly attribute readyState represents the state of the connection. It can have the following values.
|
| Socket.bufferedAmount |
The readonly attribute bufferedAmount represents the number of bytes of UTF-8 text that have been queued using send() method. |
WebSocket Events
Following are the events associated with WebSocket object. Assuming we created Socket object as mentioned above
| Event | Values & Event Handler | Values & Description |
|---|---|---|
| open | Socket.onopen | This event occurs when socket connection is established. |
| message | Socket.onmessage | This event occurs when client receives data from server. |
| error | Socket.onerror | This event occurs when there is any error in communication. |
| close | Socket.onclose | This event occurs when connection is closed. |
WebSocket Methods
Following are the methods associated with WebSocket object. Assuming we created Socket object as mentioned above −
| Method | Description |
|---|---|
| Socket.send() |
The send(data) method transmits data using the connection. |
| Socket.close() |
The close() method would be used to terminate any existing connection. |
Setting Up the WebSocket Server with Python
- Step 1. Install Python
- If you don”t have python installed on your device, Download and install it from Python.org
- Step 2. Install WebSocket library
- After installing python create a folder for your project, And open that folder in command prompt or terminal. Then run this prompt.
pip install websockets
- Step 3. Create the websocket server
- Open any text editor and write the below python code. Then save that as a file in the folder with name ”server.py”
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
print(f"Received message: {message}")
await websocket.send(f"Server: You said "{message}"")
start_server = websockets.serve(echo, "localhost", 8080)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
- Step 4. Run the server
- In the terminal navigate to your project folder, and run this command to start server.
python server.py
Setting up HTML client for the server
So far we setup a python server for websocket. The server will be running on your terminal, so any messages sent to server will be visible at terminal. Here we will see how to setup a client that can receive message from server and also send message to server using HTML and JavaScript.
Create a HTML file ”index.html” in the folder
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebSocket Example</title>
</head>
<body>
<h1>WebSocket Client</h1>
<input type="text"
id="messageInput"
placeholder="Type a message..." />
<button id="sendButton">
Send
</button>
<div id="messages">
</div>
<script>
const socket = new WebSocket(''ws://localhost:8080'');
socket.addEventListener(''open'',
() => {
console.log(''Connected to server'');
});
socket.addEventListener(''message'',
(event) => {
const messageDiv = document.createElement(''div'');
messageDiv.textContent = event.data;
document.getElementById(''messages'').appendChild(messageDiv);
});
document.getElementById(''sendButton'').addEventListener(''click'',
() => {
const messageInput = document.getElementById(''messageInput'');
const message = messageInput.value;
socket.send(message);
messageInput.value = '''';
});
</script>
</body>
</html>
”;