How to use WebSockets
hey guys how you going
my name is dom and in today’s video
we’re going to be having a look at the
basics of using websockets
okay so websockets allows for two-way
event-driven communication between a web
browser and
a websocket server okay so this makes it
perfect for real-time applications so
things like chat applications
multiplayer games or even displaying
live data
okay so after watching this tutorial you
should be able to
create your own simple websockets
application
so i want to jump right into actually
using websockets and of course
sending data between this page and our
server side
okay so let’s go inside the text editor
as we can see i’ve got this index.html
file so
of course this one refers to this page
right here
and we’re going to be sending
information from this page to our server
side
so let’s firstly just create
a new websocket server okay so
we’re going to be using node.js as our
server-side technology
but you can use many different languages
and technologies
but of course node.js is probably one of
the more popular ones
okay so let’s go inside here make a new
directory called server
and of course you want to make sure you
have npm or nodejs installed so
we’re going to be going inside the
terminal for this directory so
forward slash server and we’re going to
be creating a new
node.js project by saying npm
init dash y okay
so now we can install uh one of the more
popular
node.js websocket servers it’s called ws
so i can say right here npmi then of
course
ws so now that’s installed
we can then make a new index.js inside
this directory
okay and of course right here we’re
going to be writing up
our websocket server so let’s first
include that module
we can say const web socket equal to
require then pass through here ws and
now
we can easily create our server by
saying
const wss short for websocket server
equal to a new websocket.server
then pass through here a list of options
so i’m just going to be specifying
one option here and that is going to be
the port
which the server runs on so i can say
here ports
then specify something like 8082
okay so now this line of code is of
course
going to actually start up our websocket
server
so let’s listen for an event
where a new client has connected to our
server
we can achieve this by saying wss.on
then pass through here connection so of
course you can pass through
many different event types here we’re
going to be passing through connection
and of course it’s going to fire off
whenever a new client has connected
so basically when i refresh this page
we expect this function right here
so i can just say right here ws
so this function right here this
callback function for this event
is going to run when i refresh this page
now ws refers to
a single connection to the server side
if you have multiple different tabs open
here or you have
multiple different users connecting at
once
then you’re gonna have many of these
connection events firing off
and many different ws objects
okay so ws refers to a single connection
whereas wss refers to the actual
server so now we can say console.log
then pass through here new client
connected
for example okay so now
once this is done like i said earlier if
i refresh this page
we expect in the console new client
connected
we can also listen for the close event
for this particular client so for
example
we can say ws dot on then pass through
here
close then inside here we can simply
just say you know console.log
clients has disconnected okay so
as we can see we are actually putting
this on this single
websocket connection and of course not
on the websocket server
okay so just keep that in mind so now
this is all we’re going to be putting
just for now so 11 lines of code gives
you
a very basic websocket server let’s now
just
go inside here and say node index.js to
of course
start our server just like that
i’m now going to just go inside this tab
for the html file i’ll just close this
for now
but it is still running in the
background and now
inside the html we can connect to our
server
so let’s say in the javascript const ws
is equal to a new instance of websocket
just like that inside here you pass
through
the url for your websocket server in
this case
we’re going to be passing through ws
colon forward slash
forward slash localhost at port 8082
okay so i do want to say first off for
development purposes where you know
while you’re experimenting locally ws is
perfectly
fine but for production you want to make
sure you use
wss which is the secure form
of websockets okay but of course ws is
fine for local development
so now this line of code when executed
is going to connect to our websocket
server right here
okay so we’re going to be saying in a
similar fashion down here
we can say ws.ad event listener
we’re going to be listening for the open
event
and this one right here is going to fire
off whenever
we are connected to our server side so
we can say here for example
uh let’s just say console.log
we are connected okay so now
we have the server running i’m just
going to maximize the terminal window
right here
then refresh the browser as we can see
we get right here
we are connected so of course we are
connected
to the server okay so now back inside
the terminal
we can see right here we get new client
connected on the server side so
currently
everything is working to plan okay of
course
this event has fired off okay we are
connected
and of course right here we are also
listening for the close event
so if i was to go back inside the
browser then refresh
then go back inside here we can see in
the terminal
we get client has disconnected because
when i refresh the page
it closes the connection to the server
and then
of course it reconnects right after on
the refresh
okay so now let’s just go back inside
the browser
and inspect the network tab of the
developer tools
inside here we can see right down here
when filtering by ws we can actually see
not only our messages when we actually
send some
but also inside the headers we can see
the websocket handshake
be taken place so initially when
establishing a connection to the server
side
it sends through an http request but
then
that gets upgraded to a websocket
connection
as we can see right here in the request
headers
uh the browser has said i want to
upgrade so connection upgrade
it is said upgrade websocket it is
trying to
upgrade the http request to our
websocket protocol
okay then the server has said yes i can
do that so
in the response that is it says okay
connection upgrade upgrade websocket
and now the hand check is complete so
now we can officially start
sending data between the client and the
server
okay so let’s now send a few messages of
course between
two so let’s actually send some messages
or send a message from the web browser
to the server side
first so inside here
let’s just let’s just stop the server
then go back inside the index.js
and we’re going to be specifying one
more event
listener for the server side so we’re
going to be saying
ws dot on once again this time
the event is going to be message okay
then inside here we can of course run
this
run this listener so i can say right
here
basically just data now data refers to
the actual data which the client side
has sent to the
server okay so when the server side gets
a message from this websocket connection
the data is inside here so i can say for
example
console.log something like
client has sent us then pass through
here
the actual data okay
so now let’s save this and then restart
the server
by saying once again node index.js
let’s go back inside the index.html
and once we have actually opened up the
connection
we are now safe to start sending data so
let’s say here ws dot send
then pass through here for example hey
how’s it going
just like that so now it’s going to send
this message
the server side is going to retrieve it
through this function right here
and of course log it to the console so
now
let’s save this let’s just open up the
terminal once again
okay let’s go back in the browser
refresh
and right here we can see of course we
get once again
we are connected but also inside the
network tab
we can see also if i click on this once
again
we get a message right here data hey
how’s it going
and that just tells you that we’ve
actually sent that message
to the server back inside the terminal
we can see right here we get client has
sent us hey
how’s it going that’s working perfectly
fine so now
let’s send data from the server back to
the client
so let’s just uh once again stop this
server
then go back inside here and in the on
listener we’re going to also just say
ws.send
this time on the server side we can pass
through here
data dot two uppercase so we’re gonna
simply
transform the string into uppercase and
send it back to
the client okay let’s go back inside the
index.html now
and actually you know retrieve that
message so
it’s going to be done in a very similar
fashion so we can say
right here ws dot add event listener
pass through here message then here
we’re gonna have a message event object
so
we can say right here simply just
console.log
for now okay we can then start the
server
once again make it full screen refresh
the browser
in the console tab we can see right here
we get message
events okay from the server side and of
course right here
inside the data property we get our
uppercase
stream okay so to access that property
of course
you can simply just say you know
e dot data something like that but you
may also want to consider
using object destructuring for example
we can say something like this data
okay then now data is going to refer to
the data property on that object so now
if i save this and refresh once again we
can see we get
hey how’s it going in the console now
that’s basically how it works a very
simple example
sending strings back and forth okay
now i wanna i wanna mention
also that if i was to just duplicate
this tab here
and refresh we can see that we get of
course
many different messages uh in the
terminal so
if i or get right here we get one two
three so
if i do it again okay try again
we now get four so like i said uh
essentially
this function right here this this on
connection
is going to run for every single
individual connection
just keep that in mind but that is the
basics of using websockets
thanks for watching guys and i’ll see
you later
you
Watch Tutorial How to Use Websocket on Youtube
