Skip to main content

Python3 Websocket Server

This is a follow up post combing pure Python Bluetooth sockets with pure Python websockets. Pure Python meaning no imports outside of the standard library and not using ctypes.

I decided my i-Racer car needed to have a much better user interface than my Python3 API. I mean when I first got it, typing car.forwards() was enough to impress me but no longer. For a while now I've been wanting to invest some of my time getting better at this web stuff. One of the suggestions I got prior to my Kiwi PyCon talk was to use websockets, problem was I didn't know much javascript yet alone websockets!

I started by looking at the Python libraries that implement websockets, tornado has one but I didn't want a whole web framework. The largest library is mod-pywebsocket. Unfortunately their API doesn't appear to easily lend itself to extension, and it is only Python2 which wouldn't play nicely with my Python3 bluetooth socket connection to the car. Their example applications have proved very valuable though.

After getting a bit of guidance from stack overflow I managed to implement enough of the protocol to create my own pure python websocket server. If you're interested my (rather rough) code is on bitbucket as websocket.py. It is quite low level code with plenty of bit manipulation routines etc:

def receive(s):
    """blocking call to receive data from client"""
    
    # read the first two bytes
    frame_head = s.recv(2)
    frame_head = frame_head
    assert is_bit_set(frame_head[1], 7)

    # length of payload
    # 7 bits, or 7 bits + 16 bits, or 7 bits + 64 bits
    payload_length = frame_head[1] & 0x7F
    if payload_length == 126:
        raw = s.recv(2)
        payload_length = bytes_to_int(raw)
    elif payload_length == 127:
        raw = s.recv(8)
        payload_length = bytes_to_int(raw)
    print('Payload is {} bytes'.format(payload_length))

    """masking key
    All frames sent from the client to the server are masked by a
    32-bit nounce value that is contained within the frame
    """
    
    masking_key = s.recv(4)

    # finally get the data:
    masked_data_in = s.recv(payload_length)
    data = bytearray(payload_length)

    # The ith byte is the XOR of byte i of the data with
    # masking_key[i % 4]
    for i, b in enumerate(masked_data_in):
        data[i] = b ^ masking_key[i % 4]

    return data
    
This wireless car application used websocket.py along with my bluetooth_car.py module to create a webserver that allowed me to drive my toy car over the internet. I came up with a very simple JSON protocol which would allow easy preprogrammed commands like up or left or stop, and also gave the ability to transfer raw command data from the browser.

#!/usr/bin/env python3

"""
JSON format expected:
    {
        'command': 'stop'|'up'|'down'|'left'|'right','raw',
        'duration': time_in_seconds,
        'data': raw_int_command
    }
"""

from threading import Thread, Event
from time import sleep
import json
import http.server
import socketserver

import websocket
from bluetooth_car import BluetoothCar

stop = Event()

def driver(s):
    car = BluetoothCar()
    duration = 0.1
    
    commands = {
        'up': car.forwards,
        'down': car.reverse,
        'left': car.left,
        'right': car.right
        }
    
    while not stop.is_set():
        raw_data = websocket.receive(s).decode()
        print(raw_data)
        data = json.loads(raw_data)
        command = data['command']
        
        if 'duration' in data and data['duration'] is not None:
            duration = data['duration']
        
        if command in commands:
            print(command)
            commands[command](duration)
        elif command == "raw":
            raw_command = data["data"]
            print("raw command: ", raw_command)
            car.drive(raw_command)


def run():
    WS_PORT = 9876
    HTTP_PORT = 8000
        
    ws = websocket.Websocket(WS_PORT, driver)
    Thread(target=ws.serve_forever, args=(stop,)).start()
    
    handler = http.server.SimpleHTTPRequestHandler
    httpd = socketserver.TCPServer(("", HTTP_PORT), handler)
    Thread(target=httpd.serve_forever).start()
    
    try:
        while True:
            sleep(1)
    except KeyboardInterrupt:
        print('stopping')
        stop.set()
        httpd.shutdown()
    
if __name__ == "__main__":
    run()

Next challenge was creating the controller - I was aiming for a joystick that could be dragged around. Naturally flash, silverlight, and java apps were not considered a viable solution. After weighing up pros and cons of canvas and svg , I finally settled on a dynamic SVG. Plenty of javascript libraries exist for visualizations, the one I liked the most is called d3. Used by the New York Times  to good effect last week creating: "Over the decades, how states have shifted".

The bulk of my javascript was made up of very simple drawing commands, the following section is responsible for creating a new websocket and after a connection to the car is made - binding the buttons to events:

function Car(){
    this.s = new WebSocket("ws://"+window.location.hostname+":9876");
    
    this.update = function(command, raw_command) {
        ...
        car.s.send(JSON.stringify({
            'duration': d,
            'command': command,
            'data': raw_command
        }));
    }
    
    this.s.onopen = function() {
        /* Register callbacks for each control button */
        d3.selectAll(".command_button")
            .on("click", car.update)
            .on("click", car.display);
    }
    
    this.s.onclose = function() {
        console.log("Connection closed.");
    }
    
    this.s.onmessage = function() {
        console.log("Received: " + e.data);
    }
    
    this.display = new JoystickDisplay(d3.select("#direction"));
    
}

To create the buttons I had mapped an array of button names ["left", "right", etc] as data:

d3.select(".controls").selectAll("button")
        .data(commands)
      .enter().append("button")
        .attr("class", "command_button")
        .text(function(d) { return d[0].toUpperCase() + d.slice(1); });

So the d3.selectAll(".command_button").on("click", car.update) line is almost misleadingly powerful - it is passing that original bit of data used in creating the button through to car.update,  since this data was the command name that function can json encode it and send it down the websocket to the server. Too easy!

So although it might not look like much, I was rather proud to drive my bt remote control car via a websocket. The html and javascript can be found at car.html in my bitbucket repository for socket examples.



I found Google Chrome was much much faster than Firefox. If the red "knob" had opacity in firefox it wouldn't render it properly as a circle! That has me a bit worried, luckily this was just a "toy" for myself and I happen to be a Chrome user.





Popular posts from this blog

Driveby contribution to Python Cryptography

While at PyConAU 2016 I attended the Monday sprints and spent some time looking at a proposed feature I hoped would soon be part of cryptography. As most readers of this blog will know, cryptography is a very respected project within the Python ecosystem and it was an interesting experience to see how such a prominent open source project handles contributions and reviews.

The feature in question is the Diffie-Hellman Key Exchange algorithm used in many cryptography applications. Diffie-Helman Key Exchange is a way of generating a shared secret between two parties where the secret can't be determined by an eavesdropper observing the communication. DHE is extremely common - it is one of the primary methods used to provide "perfect forward secrecy" every time you initiate a TLS connection to an HTTPS website. Mathematically it is extremely elegant and the inventors were the recipients of the 2015 Turing award.

I wanted to write about this particular contribution because man…

My setup for downloading & streaming movies and tv

I recently signed up for Netflix and am retiring my headless home media pc. This blog will have to serve as its obituary. The box spent about half of its life running FreeNAS, and half running Archlinux. I’ll briefly talk about my experience with FreeNAS, the migration, and then I’ll get to the robust setup I ended up with.

The machine itself cost around $1000 in 2014. Powered by an AMD A4-7300 3.8GHz cpu with 8GB of memory. A SilverStone DS380 case is both functional, quiet and looks great. The hard drives have been updated over the last two years until it had a full compliment of 6 WD Green 4TiB drives - all spinning bits of metal though.

Initially I had the BSD based FreeNAS operating system installed. I had a single hard drive in its own ZFS pool for TV and Movies, and a second ZFS pool comprised of 5 hard drives for documents and photos.

FreeNAS is straight forward to use and setup, provided you only want to do things supported out of the box or by plugins. Each plugin is install…

Markdown Editor Component for Angular2

Thought I'd share a component I've been hacking on for angular2: a syntax highlighted markdown editor with rendered preview.

The code including a basic example is available on github. Because Angular2 hasn't yet been released this is really just me kicking the tyres.



This component relies on two libraries:

- marked for rendering markdown as html
- and ace editor for editing markdown
Basic Usage Example Add to your html template:
<markdown-editor (save)="updatedText($event)" [initial-text]="markdownContent"></markdown-editor> Remember to include the Markdowndirective in your @Component annotation:
@Component({ selector:'about', directives: [CORE_DIRECTIVES, Markdown] }) Another Example You can also control the component with external ui:
<button (click)="md.editMode = true">Custom Edit Button</button><markdown-editor [initial-text]="myMarkdownText" [show-edit-but…