WebSockets Are Changing The Internet – By Ben Stobaugh – What are websockets?

View Github Repository Open presentation in a new window

Legoben

See all presentation from Legoben

WebSockets Are Changing The Internet – By Ben Stobaugh – What are websockets?

0 0

Socket-Presentation

Presentation for school using reveal.js and WebSockets.

On Github Legoben / Socket-Presentation

WebSockets Are Changing The Internet

By Ben Stobaugh

What are websockets?

So, what are WebSockets? Websockets is a an easy and univerally supported protocol used to achieve bidirectional communication between the server and the client. In other words, it allows me to do stuff like this: **Next Slide**

*Poof*

What just happened there was I sent a message to the WebSocket Server I'm running and it, in turn, sent a message to all of you telling you to go to the next slide.

A Step Back

In order to understand WebSockets we really need to take a step back and try to understand how the internet works. Back when the internet was made the only get informtion to the server was by using the form element. The form element worked by sending the user's data to the server via HTTP request, which required the client to either refresh or be redirected to a different page. *Refresh* That's not fun, right?

And Then, AJAX

And then, in 2005, AJAX came along, and the web rejoiced. Now, website can create an HTTP request without having to reload the page. Everything today uses AJAX. Everything. Facebook uses AJAX to tell it's servers whenever you like a post or leave a comment. Twitter uses this whenever you retweet something or favorite something. AJAX is everywhere. So, you can not get information from the server, but it isn't practical for say, a chat system.

HTTP Polling

Then, a method called HTTP polling was introduced, and how it works is the client automatically makes an HTTP/AJAX request several times a second, sending data to the server and checking if the server has any new data. This method has its weaknesses, however. The main one is that it uses up a LOT of bandwidth, both from the client and user.

WebSockets

Now we have WebSockets, the ultimante solution to realtime bi-directional server client communication. So, let me go to the next slide to explain this in a little bit more detail.

The Handshake

Every WebSockets connection begins with a handshake. The client will use JavaScrip's built in WebSockets class to connect to a WebSocket server using an HTTP request, like AJAX would do it. The client connects, telling the server who it is and a little bit about it's self, like its version, IP address, ect. The server acknowledges the connection and sends the client information telling it that to upgrate the existing HTTP connection to a WebScokets connection as well as some information to the client varifying the server is who it claims to be.

The Connection

Once the connection initiated, both the client and the server have the following event based functions, onOpen, onMessage, onError, and onClose. The client and server can also use a built in send function. Messages are sent in frames, which start with a 0x00 byte, have a string of text, and end with a 0xff byte. It is usually best practace to send a JSON object in the string so you can send multiple types of data in one message. That is how this presentation works.

The Disconection

Both the client or the server can close the connection. When the connection is closed, the disconnecting party lets the other know that it's leaving so that it can call it's on close method. Then it disconnects.

Demos

Okay, now that we've got that out of the way, lets get to the fun part of the presentation: Demos!

Sending a message to the server

Send

Messages:

The Code (Client)

var ws = new WebSocket("ws://localhost:9008/ws");

ws.onopen = function () {
    // Web Socket is connected, send data using send()
};

ws.onmessage = function (evt) {
    json = JSON.parse(evt.data);
    var m = document.getElementById('messages')
    m.innerHTML = 'user: ' +json.chat + '' + m.innerHTML
};
                        
function sendMessage(){
    if(document.getElementById('sendmessage').value == ''){
        return;   
    }
    var msg = document.getElementById('sendmessage').value
    ws.send('{"event":"sendmessage", "chat":"'+msg+'"}') 
    document.getElementById('sendmessage').value = '';
}

The Code (Server)

users = []

def open(self):
    users.append

def on_message(self, message):
    for user in users:
        user.write_message(message)

def on_close(self):
    if self in users:
        users.remove(self)

Any Questions?