From 017d73ec3e745a7701f6cac2db23595b78a0af5c Mon Sep 17 00:00:00 2001
From: ben <ben@arc.wales>
Date: Thu, 6 Oct 2022 17:41:06 +0100
Subject: [PATCH] Added code sample for websocket stuff

---
 docs/devs/websockets.md | 87 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 docs/devs/websockets.md

diff --git a/docs/devs/websockets.md b/docs/devs/websockets.md
new file mode 100644
index 00000000..34cf940d
--- /dev/null
+++ b/docs/devs/websockets.md
@@ -0,0 +1,87 @@
+---
+layout: default
+parent: For developers
+title: Websockets
+nav_order: 2
+---
+
+
+Websockets
+=================
+
+`websockets` are a great way to add a two way instant data channel between server and client. This example was taken from teh copilot extension, we create a websocket endpoint which can be restricted by `id`, then can feed it data to broadcast to any client on the socket using the `updater(extension_id, data)` function (`extension` has been used in place of an extension name, wreplace to your own extension):
+
+
+```sh
+from fastapi import Request, WebSocket, WebSocketDisconnect
+
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: List[WebSocket] = []
+
+    async def connect(self, websocket: WebSocket, extension_id: str):
+        await websocket.accept()
+        websocket.id = extension_id
+        self.active_connections.append(websocket)
+
+    def disconnect(self, websocket: WebSocket):
+        self.active_connections.remove(websocket)
+
+    async def send_personal_message(self, message: str, extension_id: str):
+        for connection in self.active_connections:
+            if connection.id == extension_id:
+                await connection.send_text(message)
+
+    async def broadcast(self, message: str):
+        for connection in self.active_connections:
+            await connection.send_text(message)
+
+
+manager = ConnectionManager()
+
+
+@extension_ext.websocket("/ws/{extension_id}", name="extension.websocket_by_id")
+async def websocket_endpoint(websocket: WebSocket, extension_id: str):
+    await manager.connect(websocket, extension_id)
+    try:
+        while True:
+            data = await websocket.receive_text()
+    except WebSocketDisconnect:
+        manager.disconnect(websocket)
+
+
+async def updater(extension_id, data):
+    extension = await get_extension(extension_id)
+    if not extension:
+        return
+    await manager.send_personal_message(f"{data}", extension_id)
+```
+
+Example vue-js function for listening to the websocket:
+
+```
+initWs: async function () {
+    if (location.protocol !== 'http:') {
+        localUrl =
+          'wss://' +
+          document.domain +
+          ':' +
+          location.port +
+          '/extension/ws/' +
+          self.extension.id
+      } else {
+        localUrl =
+          'ws://' +
+          document.domain +
+          ':' +
+          location.port +
+          '/extension/ws/' +
+          self.extension.id
+      }
+    this.ws = new WebSocket(localUrl)
+    this.ws.addEventListener('message', async ({data}) => {
+      const res = JSON.parse(data.toString())
+      console.log(res)
+    })
+},
+```
\ No newline at end of file