#upgrade required (websocket stuff)

129 messages · Page 1 of 1 (latest)

rigid thistle
#

im just beggining to use typescript + node + websockets, and i watched a youtube tutorial and did literally everything the way they did it. and yet my localhost:8080 keeps on saying "upgrade required".
this is the server side code:

import { WebSocket } from "ws";

const port = 8080;
const wss = new WebSocket.Server({port});

console.log(`Listening at ${port}`);

wss.on('connection', ws => {
    console.log('client connected');

    ws.on('close', () => {
        console.log('client disconnected');
    });
});

and this is the index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      #canvas {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        background-color: #383636;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="index.js"></script>
  </body>
</html>

the client sided index.js is empty. the youtube tutorial told me to do it this way. but it just doesnt work. what is going on?
also the console.logs dont work

frosty breach
#

ok one sec it's one of these

rigid thistle
#

oh that was quick

rigid thistle
frosty breach
#

the message you're getting is an http status code

frosty breach
rigid thistle
rigid thistle
frosty breach
#

you can see the full gallery on http.cat

#

hm, normally when establishing a ws connection you'd get a 101, Switching Protocols

rigid thistle
#

i will keep in mind this link https://http.cat/426

rigid thistle
#

i mean it works in the tutorial vid

frosty breach
#

it seems to me that it may be because it's in a non secure context (http)

rigid thistle
#

i was sitting till 4am yesterdat

#

trynna fix this

frosty breach
#

also the console.logs dont work
which ones are you referring to?

rigid thistle
#

thats like 11 lines of code

frosty breach
#

the ones in the server?

rigid thistle
#

yeah i think

frosty breach
#

what about the clientside code

#

do you have any errors in the browser console

rigid thistle
#

let me check

frosty breach
#

how are you opening the index.html exactly?

rigid thistle
#

local host

frosty breach
#

and what port did you open

rigid thistle
#

8080

frosty breach
#

that's the ws port

#

you'd need it served over http

rigid thistle
#

yeah

#

oh wait

frosty breach
#

this is exactly what the third answer in the SO post was talking about

rigid thistle
#

oh yeah

#

it says to open it as a file

#

just double clikcing it

#

but the thing is

#

thats not what the youtube tutorial did

#

and thats not what i want

#

it works if i open it as a file

frosty breach
#

then you need to serve the actual index.html

rigid thistle
#

how?

frosty breach
#

quite a few ways, like via http-server or express to serve it over http

or just.. open the file, to serve it over file

rigid thistle
#

oppening the file isnt waht i want, i need it to be local host

frosty breach
#

what did the youtube tutorial do, then?

rigid thistle
#

let me show you

#

from the 4th minute @frosty breach

frosty breach
#

they were serving on a domain they already had hooked up

#

just open the file to see if the ws part works first

#

then figure out serving over http

rigid thistle
rigid thistle
#

no logs

#

and this

frosty breach
#

well, expand it to see what it says

rigid thistle
#

maybe its a compile problem?

frosty breach
#

no

rigid thistle
#

oh wait

frosty breach
#

your code is discarding info about the error

rigid thistle
#

wtf i had something in the index.js

#

client sided

#

i removed it now

#

no errors

#

and no messages that something connected

frosty breach
#

use console.log(msg, error) instead of console.log(msg + error)

rigid thistle
frosty breach
#

and it seems that your websocket is trying to connect to some random websocket rather than the one you're opening

frosty breach
#

on line 7 in the code you just showed

rigid thistle
#

i deleted everything

#

it shouldnt be there

frosty breach
#

why not lmao

rigid thistle
rigid thistle
#

and it didnt work

#

i copy pasted from somehwere

frosty breach
#

why didn't you just use the script that the tutorial used

#

but it was pretty close to working anyways

rigid thistle
#

i did everything the way they did it

frosty breach
#

let me guess, you thought that code didn't work because you were trying to connect to the ws directly instead of opening the html file?

rigid thistle
frosty breach
#

the code wasn't even running

#

you weren't even opening the index.html file

rigid thistle
#

how do i do that?

#

how do i make it load the file

frosty breach
#

you open the file

#

in a browser

#

like the SO post said

rigid thistle
#

yes but is there a way using local host instead

frosty breach
#

you would serve it via http-server or express or some other method

#

you're just asking the same questions now

rigid thistle
#

oh yeah

rigid thistle
#

how do i use that?

#

i know what express is

frosty breach
#

it's not what you need right now, no

rigid thistle
#

but i dont want it

frosty breach
#

you need to stop making assumptions

#

your original issue was that you weren't even opening the right file
but you assumed it was the code being wrong, so you changed that

rigid thistle
#

i know how to use express, but im trying to not use a lot of libs and just stick with plain ts and ws

frosty breach
#

you're getting ahead of yourself

rigid thistle
#

eyah i get it

frosty breach
#

so what you should do right now is use the tutorial's original code and open the actual html file

rigid thistle
#

so now i need to send the html file to the client

frosty breach
#

that's the next step, the serving part

rigid thistle
#

hey you wanna vc?

frosty breach
#

no

rigid thistle
#

okay so openned the file

#

but how do i connect it to the serverf

frosty breach
#

use the tutorial's original code

#

please just... read what ive said

rigid thistle
#

i already did use the original code

#

wait

#

const ws = new WebSocket("ws://localhost:8080");
i needed this

#

OH THERE WE GO

#

but i still have to open the file though

#

okay i think i forgot some parts of the code

#

but now how do i make it serve the html