Coding Problem Between Javascript Client and Python Server

Question

I have a server socket in Python, follow the code:

from socket import *

host = '127.0.0.1'
port = 6060

try:
    server = socket(AF_INET, SOCK_STREAM)
    server.bind((host, port))
    server.listen(5)
    print('Servidor Python escutando...')

    client = server.accept()

    while True:
        data = client.recv(2048)
        if not len(data):
            break

        print(data)
        print(data.decode())       

    server.close()

except Exception as e:
    print(e)

And I have the client socket in Javascript, follow the code:

socket = new WebSocket('wss://127.0.0.1:6060')

socket.onopen = function(event)
{
    let data = new TextEncoder('utf-8').encode('Cliente JavaScript conectado')
    socket.send(data)
}

I run the Python server from the command line, then access the file. html (with the socket client code between script tags) in the browser, but soon after I open the page in the browser, I get the following error in the terminal:

Traceback (most recent call last):
    File "server.py", line 20, in <module>
        print(data.decode())
    UnicodeDecodeError: 'utf-8' codec can't decode byte 0xfc in position 8: invalid start byte

The Javascript Client connects, but in the Python server, when decoding the message that is in bytes, this error occurs.

When I create a socket client in Python, everything runs normally and no error is reported in decoding the message.

In the browser console, the javascript message I encode with the Encode method of the Textencoder object is presented in this way:

Uint8Array(28) [67, 108, 105, 101, 110, 116, 101, 32, 74, 97, 118, 97, 83, 99, 114, 105, 112, 116, 32, 99, 111, 110, 101, 99, 116, 97, 100, 111]

In python, it is received this way by the function print(date):

b'\x16\x03\x01\x02\x00\x01\x00\x01\xfc\x03\x03\xc8.>\xbd\x9e\xb4.\x176%%&\xe1\xdf\x8a\xb0T\xc3s\xbb\x06\x1e\xec*\xf7\xdb\r\xdbE\xd4V; Nl\xc6P\xb9\x9dsa\xe51D\xc0r4V\xed\xe3\x0b\x87K5\x1e\x99b\x80\x99\xc8\xf04OG\xed\x00 \xda\xda\x13\x01\x13\x02\x13\x03\xc0+\xc0/\xc0,\xc00\xcc\xa9\xcc\xa8\xc0\x13\xc0\x14\x00\x9c\x00\x9d\x00/\x005\x01\x00\x01\x93\xaa\xaa\x00\x00\x00\x17\x00\x00\xff\x01\x00\x01\x00\x00\n\x00\n\x00\x08\xaa\xaa\x00\x1d\x00\x17\x00\x18\x00\x0b\x00\x02\x01\x00\x00#\x00\x00\x00\x05\x00\x05\x01\x00\x00\x00\x00\x00\r\x00\x12\x00\x10\x04\x03\x08\x04\x04\x01\x05\x03\x08\x05\x05\x01\x08\x06\x06\x01\x00\x12\x00\x00\x003\x00+\x00)\xaa\xaa\x00\x01\x00\x00\x1d\x00 \x82\xbfo\xe73\x88**U\xbb\xba a\xe1\xdd%\x069\xda\xde\xe0\x95\x9f\xcd\x0eQ\xf2\x1fb\xa7-P\x00-\x00\x02\x01\x01\x00+\x00\x0b\nzz\x03\x04\x03\x03\x03\x02\x03\x01\x00\x1b\x00\x03\x02\x00\x02\xda\xda\x00\x01\x00\x00\x15\x00\xf7\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00'

How do I encode a text for bytes in Javascript in a way that I can decode it in python without this problem?

I thank anyone who can help me.

Answer 1

You’re confusing concepts. The library socket [Python-Docs] is different from websockets.

In your case, you want to implement a websocket to communicate between the Python server and the browser (via the module WebSocket javascript).

Attention that such as the https only works with a valid SSL certificate, the protocol wss can also only be used with a valid SSL certificate. If you do not have a certificate, you should change the Javascript code to:

socket = new WebSocket('ws://127.0.0.1:6060')

The implementation of a basic websocket server from documentação.

import asyncio
import websockets #pip install websockets

async def hello(websocket, path):
    data = await websocket.recv()
    print(f"RECEIVED >> {data.decode('utf8')}")

start_server = websockets.serve(hello, "127.0.0.1", 6060)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

#RECEIVED >> Cliente JavaScript conectado

The data is decoded correctly.