I'm trying a socket connection between server and client. Where my server is in python. I've created a Fast API WebSocket for backend and Vue.js is on the client-side. The backend server is running as expected. But whenever I try to load my front-end I keep getting this error in the console. I've searched through many sites but haven't found a proper solution for it. Can someone suggest how to solve this error to connect frontend and backend via sockets?

here's my code

var socket = new WebSocket("ws://localhost:8000")
socket.onmessage = function(e){
console.log(e.data)
}

socket.onerror = function(e){
console.log(e.data)
}

------------------------------backend--------------------------
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        await websocket.send_text(f"Message text was: {data}")

I'm trying a socket connection between server and client. Where my server is in python. I've created a Fast API WebSocket for backend and Vue.js is on the client-side. The backend server is running as expected. But whenever I try to load my front-end I keep getting this error in the console. I've searched through many sites but haven't found a proper solution for it. Can someone suggest how to solve this error to connect frontend and backend via sockets?

here's my code

var socket = new WebSocket("ws://localhost:8000")
socket.onmessage = function(e){
console.log(e.data)
}

socket.onerror = function(e){
console.log(e.data)
}

------------------------------backend--------------------------
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        await websocket.send_text(f"Message text was: {data}")

• javascript
• python
• sockets
• websocket

1 Answer 1

Replace:

var socket = new WebSocket("ws://localhost:8000")

to:

var socket = new WebSocket("ws://localhost:8000/ws")