Creating a Minimal WebSocket Connection in Python, Inspired by the Simplicity of Socket.IO

-

 Simple Websocket  Connection. LIke socket io.


main.py

import asyncio
import websockets
import uuid

connections = []

# when new socket connection comes this' function will executeed
async def handle_websocket(websocket, path): #<-- path of socket recived
    # creating uniq id
    connection_id = str(uuid.uuid4())
 
    # This function will be append new connection
    connections.append(connection_id)
   
   
    print("Connected:- ",connection_id)

    # < -- when user connected send him a message -- >
    await websocket.send(f"Your Id: {connection_id}")
   
    # < -- it\'s a user connection i'ts run antil user connected when user diconnected it will be ditoryed -- >
    try:
        while True:
            try:
                # Receive message from the client
                message = await websocket.recv()
               
                # Send a response back to the client
                response = f"Server received: {message}:"
                await websocket.send(response)
           
            # < -- user disconnected -- >
            except:
                await websocket.close()
                connections.remove(connection_id)
                print("Disconnected:- ",connection_id)
                break

    except Exception as error:
        print("error:- ",error)
       

# Create the WebSocket server
start_server = websockets.serve(handle_websocket, "localhost", 8765)

# Start the event loop
asyncio.get_event_loop().run_until_complete(start_server)

asyncio.get_event_loop().run_forever()


INDEX.HTML


<!-- Example HTML with JavaScript to connect to the WebSocket server -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
</head>

<body>
    <input type="text" id="inputText">
    <button onclick="sendMsg()">send</button>
    <script>
        const socket = new WebSocket('ws://localhost:8765/connect');

        function sendMsg() {
            text = inputText.value
            socket.send(text);
        }
        document.addEventListener("keyup", (e) => e.key == "Enter" ? sendMsg() : null)
        // Connection opened
        socket.addEventListener('open', (event) => {
            console.log('WebSocket connection opened:', event);

            // Send a message to the server
            socket.send('Hello, WebSocket!');
        });

        // Listen for messages from the server
        socket.addEventListener('message', (event) => {
            console.log(event.data);
        });

        // Connection closed
        socket.addEventListener('close', (event) => {
            console.log('WebSocket connection closed:', event);
        });

        // Handle errors
        socket.addEventListener('error', (error) => {
            console.error('WebSocket error:', error);
        });

    </script>
</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Express Production Setup - 4 | HELMET

-
 Helmet helps secure Express apps by setting HTTP response headers. it will remove all header from express app like X-Powered-By : express  we can remove using  express.remove("x-powered-by"); but it's make it easy * also help  XSS attacks index.js      import express from " express ";     import helmet from " helmet ";     const app = express ();     // Use Helmet!     app . use ( helmet ());     app . get (" / ", ( req , res ) => {     res . send (" Hello world! ");     });     app . listen ( 8000 );
Read more

Express Production Setup - 3 | CORS

-
 Express Production Setup - 3 | CORS  To enable Cross-Origin Resource Sharing (CORS) in an Express.js application, you can use the cors middleware package. This middleware allows you to control which domains can access your API, what methods are allowed, and what headers can be sent in requests. index.js     const express = require (' express ');     const cors = require (' cors ');     const app = express ();     // CORS options to allow only POST requests     const corsOptions = {         origin: ' http://example.com ', // Replace with your client's origin         methods: [' POST ', " GET ", " PUT ", " PATCH ", " DELETE "],         credentials: true // allow cookies     };     // Apply CORS middleware with the above options     app . use ( cors ( corsOptions ));     // Example route     app . post (' /a...
Read more

Ensuring File Creation in the Current Directory when Converting Python (.py) Script to Executable (.exe).

-
Image
Ensuring File Creation in the Current Directory when Converting Python (.py) Script to Executable (.exe). When you create a file in Python within the current directory, everything works seamlessly. However, if you decide to convert your Python script into a standalone executable (.exe) using tools like PyInstaller, you might encounter a situation where the file is created in a temporary folder, and upon code execution completion, it mysteriously disappears. To overcome this challenge and ensure that your file appears in the current directory, consider using the following code snippet: Explanation: In the above code, we use sys.frozen to check if the script is running in a frozen (compiled into an executable) environment. This is particularly relevant when the script is converted to a standalone executable using tools like PyInstaller. When the script is running as a .py file, myPath is set to the absolute path of the script using os.path.abspath(__file__). When the script is running as...
Read more