xprilion/Python Websockets SSL with Let's Encrypt

## Python Websockets SSL with Let's Encrypt
## Python Websockets SSL with Lets Encrypt

This code uses the `python-websockets` library.

You'll need to generate the certificate and keyfile using Let's Encrypt.

After generating the files correctly, you need to make them accessible to the current user who runs the script, my way of doing this was to copy it to the home directory of the current user and change the owner to the current user, set the permissions of the files to 400.

To know more about this process, read the blog here - https://xprilion.com/python-websockets-ssl-with-lets-encrypt/

## socket_client.html
<html>
    <head>
        <title>WebSocket demo</title>
        <style type="text/css">
            body {
                font-family: "Courier New", sans-serif;
                text-align: center;
            }
            .buttons {
                font-size: 4em;
                display: flex;
                justify-content: center;
            }
            .button, .value {
                line-height: 1;
                padding: 2rem;
                margin: 2rem;
                border: medium solid;
                min-height: 1em;
                min-width: 1em;
            }
            .button {
                cursor: pointer;
                user-select: none;
            }
            .minus {
                color: red;
            }
            .plus {
                color: green;
            }
            .value {
                min-width: 2em;
            }
            .state {
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <div class="buttons">
            <div class="minus button">-</div>
            <div class="value">?</div>
            <div class="plus button">+</div>
        </div>
        <div class="state">
            <span class="users">?</span> online
        </div>
        <script>
            var minus = document.querySelector('.minus'),
                plus = document.querySelector('.plus'),
                value = document.querySelector('.value'),
                users = document.querySelector('.users'),
                websocket = new WebSocket("wss://localhost:6789/");
            minus.onclick = function (event) {
                websocket.send(JSON.stringify({action: 'minus'}));
            }
            plus.onclick = function (event) {
                websocket.send(JSON.stringify({action: 'plus'}));
            }
            websocket.onmessage = function (event) {
                data = JSON.parse(event.data);
                switch (data.type) {
                    case 'state':
                        value.textContent = data.value;
                        break;
                    case 'users':
                        users.textContent = (
                            data.count.toString() + " user" +
                            (data.count == 1 ? "" : "s"));
                        break;
                    default:
                        console.error(
                            "unsupported event", data);
                }
            };
        </script>
    </body>
</html

## socket_server.py
#!/usr/bin/env python

# WS server example that synchronizes state across clients

import asyncio
import json
import logging
import websockets
import ssl

logging.basicConfig()
ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)

# Generate with Lets Encrypt, copied to this location, chown to current user and 400 permissions
ssl_cert = "/home/username/fullchain.pem"
ssl_key = "/home/username/privkey.pem"

ssl_context.load_cert_chain(ssl_cert, keyfile=ssl_key)

STATE = {"value": 0}

USERS = set()


def state_event():
    return json.dumps({"type": "state", **STATE})


def users_event():
    return json.dumps({"type": "users", "count": len(USERS)})


async def notify_state():
    if USERS:  # asyncio.wait doesn't accept an empty list
        message = state_event()
        await asyncio.wait([user.send(message) for user in USERS])


async def notify_users():
    if USERS:  # asyncio.wait doesn't accept an empty list
        message = users_event()
        await asyncio.wait([user.send(message) for user in USERS])


async def register(websocket):
    USERS.add(websocket)
    await notify_users()


async def unregister(websocket):
    USERS.remove(websocket)
    await notify_users()


async def counter(websocket, path):
    # register(websocket) sends user_event() to websocket
    await register(websocket)
    try:
        await websocket.send(state_event())
        async for message in websocket:
            data = json.loads(message)
            if data["action"] == "minus":
                STATE["value"] -= 1
                await notify_state()
            elif data["action"] == "plus":
                STATE["value"] += 1
                await notify_state()
            else:
                logging.error("unsupported event: {}", data)
    finally:
        await unregister(websocket)


start_server = websockets.serve(counter, "0.0.0.0", 6789, ssl=ssl_context)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
	## Python Websockets SSL with Lets Encrypt

	This code uses the `python-websockets` library.

	You'll need to generate the certificate and keyfile using Let's Encrypt.

	After generating the files correctly, you need to make them accessible to the current user who runs the script, my way of doing this was to copy it to the home directory of the current user and change the owner to the current user, set the permissions of the files to 400.

	To know more about this process, read the blog here - https://xprilion.com/python-websockets-ssl-with-lets-encrypt/
	<html>
	<head>
	<title>WebSocket demo</title>
	<style type="text/css">
	body {
	font-family: "Courier New", sans-serif;
	text-align: center;
	}
	.buttons {
	font-size: 4em;
	display: flex;
	justify-content: center;
	}
	.button, .value {
	line-height: 1;
	padding: 2rem;
	margin: 2rem;
	border: medium solid;
	min-height: 1em;
	min-width: 1em;
	}
	.button {
	cursor: pointer;
	user-select: none;
	}
	.minus {
	color: red;
	}
	.plus {
	color: green;
	}
	.value {
	min-width: 2em;
	}
	.state {
	font-size: 2em;
	}
	</style>
	</head>
	<body>
	<div class="buttons">
	<div class="minus button">-</div>
	<div class="value">?</div>
	<div class="plus button">+</div>
	</div>
	<div class="state">
	<span class="users">?</span> online
	</div>
	<script>
	var minus = document.querySelector('.minus'),
	plus = document.querySelector('.plus'),
	value = document.querySelector('.value'),
	users = document.querySelector('.users'),
	websocket = new WebSocket("wss://localhost:6789/");
	minus.onclick = function (event) {
	websocket.send(JSON.stringify({action: 'minus'}));
	}
	plus.onclick = function (event) {
	websocket.send(JSON.stringify({action: 'plus'}));
	}
	websocket.onmessage = function (event) {
	data = JSON.parse(event.data);
	switch (data.type) {
	case 'state':
	value.textContent = data.value;
	break;
	case 'users':
	users.textContent = (
	data.count.toString() + " user" +
	(data.count == 1 ? "" : "s"));
	break;
	default:
	console.error(
	"unsupported event", data);
	}
	};
	</script>
	</body>
	</html
	#!/usr/bin/env python

	# WS server example that synchronizes state across clients

	import asyncio
	import json
	import logging
	import websockets
	import ssl

	logging.basicConfig()
	ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)

	# Generate with Lets Encrypt, copied to this location, chown to current user and 400 permissions
	ssl_cert = "/home/username/fullchain.pem"
	ssl_key = "/home/username/privkey.pem"

	ssl_context.load_cert_chain(ssl_cert, keyfile=ssl_key)

	STATE = {"value": 0}

	USERS = set()


	def state_event():
	return json.dumps({"type": "state", **STATE})


	def users_event():
	return json.dumps({"type": "users", "count": len(USERS)})


	async def notify_state():
	if USERS: # asyncio.wait doesn't accept an empty list
	message = state_event()
	await asyncio.wait([user.send(message) for user in USERS])


	async def notify_users():
	if USERS: # asyncio.wait doesn't accept an empty list
	message = users_event()
	await asyncio.wait([user.send(message) for user in USERS])


	async def register(websocket):
	USERS.add(websocket)
	await notify_users()


	async def unregister(websocket):
	USERS.remove(websocket)
	await notify_users()


	async def counter(websocket, path):
	# register(websocket) sends user_event() to websocket
	await register(websocket)
	try:
	await websocket.send(state_event())
	async for message in websocket:
	data = json.loads(message)
	if data["action"] == "minus":
	STATE["value"] -= 1
	await notify_state()
	elif data["action"] == "plus":
	STATE["value"] += 1
	await notify_state()
	else:
	logging.error("unsupported event: {}", data)
	finally:
	await unregister(websocket)


	start_server = websockets.serve(counter, "0.0.0.0", 6789, ssl=ssl_context)

	asyncio.get_event_loop().run_until_complete(start_server)
	asyncio.get_event_loop().run_forever()