Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 1 | import {ConfigHandler} from './config_handler'; |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 2 | import * as configuration from 'org_frc971/aos/configuration_generated'; |
| 3 | import * as web_proxy from 'org_frc971/aos/network/web_proxy_generated'; |
| 4 | import {Builder} from 'org_frc971/external/com_github_google_flatbuffers/ts/builder'; |
| 5 | import {ByteBuffer} from 'org_frc971/external/com_github_google_flatbuffers/ts/byte-buffer'; |
| 6 | |
| 7 | import Configuration = configuration.aos.Configuration; |
| 8 | import MessageHeader = web_proxy.aos.web_proxy.MessageHeader; |
| 9 | import WebSocketIce = web_proxy.aos.web_proxy.WebSocketIce; |
| 10 | import WebSocketMessage = web_proxy.aos.web_proxy.WebSocketMessage; |
| 11 | import Payload = web_proxy.aos.web_proxy.Payload; |
| 12 | import WebSocketSdp = web_proxy.aos.web_proxy.WebSocketSdp; |
| 13 | import SdpType = web_proxy.aos.web_proxy.SdpType; |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 14 | |
| 15 | // There is one handler for each DataChannel, it maintains the state of |
| 16 | // multi-part messages and delegates to a callback when the message is fully |
| 17 | // assembled. |
| 18 | export class Handler { |
| 19 | private dataBuffer: Uint8Array|null = null; |
| 20 | private receivedMessageLength: number = 0; |
| 21 | constructor( |
James Kuszmaul | 48413bf | 2020-09-01 19:19:05 -0700 | [diff] [blame] | 22 | private readonly handlerFunc: |
| 23 | (data: Uint8Array, sentTime: number) => void, |
Philipp Schrader | 47445a0 | 2020-11-14 17:31:04 -0800 | [diff] [blame] | 24 | private readonly channel: RTCDataChannel) { |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 25 | channel.addEventListener('message', (e) => this.handleMessage(e)); |
| 26 | } |
| 27 | |
| 28 | handleMessage(e: MessageEvent): void { |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 29 | const fbBuffer = new ByteBuffer(new Uint8Array(e.data)); |
| 30 | const messageHeader = MessageHeader.getRootAsMessageHeader( |
| 31 | fbBuffer as unknown as flatbuffers.ByteBuffer); |
James Kuszmaul | 48413bf | 2020-09-01 19:19:05 -0700 | [diff] [blame] | 32 | const time = messageHeader.monotonicSentTime().toFloat64() * 1e-9; |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 33 | // Short circuit if only one packet |
Alex Perry | 22824d7 | 2020-02-29 17:11:43 -0800 | [diff] [blame] | 34 | if (messageHeader.packetCount() === 1) { |
James Kuszmaul | 48413bf | 2020-09-01 19:19:05 -0700 | [diff] [blame] | 35 | this.handlerFunc(messageHeader.dataArray(), time); |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 36 | return; |
| 37 | } |
| 38 | |
| 39 | if (messageHeader.packetIndex() === 0) { |
| 40 | this.dataBuffer = new Uint8Array(messageHeader.length()); |
Alex Perry | 22824d7 | 2020-02-29 17:11:43 -0800 | [diff] [blame] | 41 | this.receivedMessageLength = 0; |
| 42 | } |
| 43 | if (!messageHeader.dataLength()) { |
| 44 | return; |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 45 | } |
| 46 | this.dataBuffer.set( |
| 47 | messageHeader.dataArray(), |
| 48 | this.receivedMessageLength); |
| 49 | this.receivedMessageLength += messageHeader.dataLength(); |
| 50 | |
| 51 | if (messageHeader.packetIndex() === messageHeader.packetCount() - 1) { |
James Kuszmaul | 48413bf | 2020-09-01 19:19:05 -0700 | [diff] [blame] | 52 | this.handlerFunc(this.dataBuffer, time); |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 53 | } |
| 54 | } |
| 55 | } |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 56 | |
| 57 | // Analogous to the Connection class in //aos/network/web_proxy.h. Because most |
| 58 | // of the apis are native in JS, it is much simpler. |
| 59 | export class Connection { |
| 60 | private webSocketConnection: WebSocket|null = null; |
| 61 | private rtcPeerConnection: RTCPeerConnection|null = null; |
Philipp Schrader | 47445a0 | 2020-11-14 17:31:04 -0800 | [diff] [blame] | 62 | private dataChannel: RTCDataChannel|null = null; |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 63 | private webSocketUrl: string; |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 64 | |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 65 | private configInternal: Configuration|null = null; |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 66 | // A set of functions that accept the config to handle. |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 67 | private readonly configHandlers = new Set<(config: Configuration) => void>(); |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 68 | |
James Kuszmaul | 48413bf | 2020-09-01 19:19:05 -0700 | [diff] [blame] | 69 | private readonly handlerFuncs = |
| 70 | new Map<string, (data: Uint8Array, sentTime: number) => void>(); |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 71 | private readonly handlers = new Set<Handler>(); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 72 | |
| 73 | constructor() { |
| 74 | const server = location.host; |
| 75 | this.webSocketUrl = `ws://${server}/ws`; |
| 76 | } |
| 77 | |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 78 | addConfigHandler(handler: (config: Configuration) => void): void { |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 79 | this.configHandlers.add(handler); |
| 80 | } |
| 81 | |
Alex Perry | b49a3fb | 2020-02-29 15:26:54 -0800 | [diff] [blame] | 82 | /** |
| 83 | * Add a handler for a specific message type. Until we need to handle |
| 84 | * different channel names with the same type differently, this is good |
| 85 | * enough. |
| 86 | */ |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 87 | addHandler(id: string, handler: (data: Uint8Array, sentTime: number) => void): void { |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 88 | this.handlerFuncs.set(id, handler); |
| 89 | } |
| 90 | |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 91 | connect(): void { |
| 92 | this.webSocketConnection = new WebSocket(this.webSocketUrl); |
| 93 | this.webSocketConnection.binaryType = 'arraybuffer'; |
| 94 | this.webSocketConnection.addEventListener( |
| 95 | 'open', () => this.onWebSocketOpen()); |
| 96 | this.webSocketConnection.addEventListener( |
| 97 | 'message', (e) => this.onWebSocketMessage(e)); |
| 98 | } |
| 99 | |
Alex Perry | 3dfcb81 | 2020-03-04 19:32:17 -0800 | [diff] [blame] | 100 | getConfig() { |
Philipp Schrader | 47445a0 | 2020-11-14 17:31:04 -0800 | [diff] [blame] | 101 | return this.configInternal; |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 102 | } |
| 103 | |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 104 | // Handle messages on the DataChannel. Handles the Configuration message as |
| 105 | // all other messages are sent on specific DataChannels. |
James Kuszmaul | 1ec7443 | 2020-07-30 20:26:45 -0700 | [diff] [blame] | 106 | onConfigMessage(data: Uint8Array): void { |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 107 | const fbBuffer = new ByteBuffer(data); |
| 108 | this.configInternal = Configuration.getRootAsConfiguration( |
| 109 | fbBuffer as unknown as flatbuffers.ByteBuffer); |
Alex Perry | 3dfcb81 | 2020-03-04 19:32:17 -0800 | [diff] [blame] | 110 | for (const handler of Array.from(this.configHandlers)) { |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 111 | handler(this.configInternal); |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 112 | } |
| 113 | } |
| 114 | |
| 115 | onDataChannel(ev: RTCDataChannelEvent): void { |
| 116 | const channel = ev.channel; |
| 117 | const name = channel.label; |
| 118 | const channelType = name.split('/').pop(); |
| 119 | const handlerFunc = this.handlerFuncs.get(channelType); |
| 120 | this.handlers.add(new Handler(handlerFunc, channel)); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 121 | } |
| 122 | |
| 123 | onIceCandidate(e: RTCPeerConnectionIceEvent): void { |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 124 | if (!e.candidate) { |
| 125 | return; |
| 126 | } |
| 127 | const candidate = e.candidate; |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 128 | const builder = new Builder(512); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 129 | const candidateString = builder.createString(candidate.candidate); |
| 130 | const sdpMidString = builder.createString(candidate.sdpMid); |
| 131 | |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 132 | const iceFb = WebSocketIce.createWebSocketIce( |
| 133 | builder as unknown as flatbuffers.Builder, candidateString, |
| 134 | sdpMidString, candidate.sdpMLineIndex); |
| 135 | const messageFb = WebSocketMessage.createWebSocketMessage( |
| 136 | builder as unknown as flatbuffers.Builder, Payload.WebSocketIce, iceFb); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 137 | builder.finish(messageFb); |
| 138 | const array = builder.asUint8Array(); |
| 139 | this.webSocketConnection.send(array.buffer.slice(array.byteOffset)); |
| 140 | } |
| 141 | |
| 142 | // Called for new SDPs. Make sure to set it locally and remotely. |
Philipp Schrader | 47445a0 | 2020-11-14 17:31:04 -0800 | [diff] [blame] | 143 | onOfferCreated(description: RTCSessionDescriptionInit): void { |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 144 | this.rtcPeerConnection.setLocalDescription(description); |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 145 | const builder = new Builder(512); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 146 | const offerString = builder.createString(description.sdp); |
| 147 | |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 148 | const webSocketSdp = WebSocketSdp.createWebSocketSdp( |
| 149 | builder as unknown as flatbuffers.Builder, SdpType.OFFER, offerString); |
| 150 | const message = WebSocketMessage.createWebSocketMessage( |
| 151 | builder as unknown as flatbuffers.Builder, Payload.WebSocketSdp, |
| 152 | webSocketSdp); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 153 | builder.finish(message); |
| 154 | const array = builder.asUint8Array(); |
| 155 | this.webSocketConnection.send(array.buffer.slice(array.byteOffset)); |
| 156 | } |
| 157 | |
| 158 | // We now have a websocket, so start setting up the peer connection. We only |
| 159 | // want a DataChannel, so create it and then create an offer to send. |
| 160 | onWebSocketOpen(): void { |
| 161 | this.rtcPeerConnection = new RTCPeerConnection({}); |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 162 | this.rtcPeerConnection.addEventListener( |
Alex Perry | 22824d7 | 2020-02-29 17:11:43 -0800 | [diff] [blame] | 163 | 'datachannel', (e) => this.onDataChannel(e)); |
Alex Perry | 5f474f2 | 2020-02-01 12:14:24 -0800 | [diff] [blame] | 164 | this.dataChannel = this.rtcPeerConnection.createDataChannel('signalling'); |
James Kuszmaul | 1ec7443 | 2020-07-30 20:26:45 -0700 | [diff] [blame] | 165 | this.handlers.add( |
| 166 | new Handler((data) => this.onConfigMessage(data), this.dataChannel)); |
Philipp Schrader | 47445a0 | 2020-11-14 17:31:04 -0800 | [diff] [blame] | 167 | // TODO(james): Is this used? Can we delete it? |
| 168 | // window.dc = this.dataChannel; |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 169 | this.rtcPeerConnection.addEventListener( |
| 170 | 'icecandidate', (e) => this.onIceCandidate(e)); |
| 171 | this.rtcPeerConnection.createOffer().then( |
| 172 | (offer) => this.onOfferCreated(offer)); |
| 173 | } |
| 174 | |
| 175 | // When we receive a websocket message, we need to determine what type it is |
| 176 | // and handle appropriately. Either by setting the remote description or |
| 177 | // adding the remote ice candidate. |
| 178 | onWebSocketMessage(e: MessageEvent): void { |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 179 | const buffer = new Uint8Array(e.data) |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 180 | const fbBuffer = new ByteBuffer(buffer); |
| 181 | const message = WebSocketMessage.getRootAsWebSocketMessage( |
| 182 | fbBuffer as unknown as flatbuffers.ByteBuffer); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 183 | switch (message.payloadType()) { |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 184 | case Payload.WebSocketSdp: |
| 185 | const sdpFb = message.payload(new WebSocketSdp()); |
| 186 | if (sdpFb.type() !== SdpType.ANSWER) { |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 187 | console.log('got something other than an answer back'); |
| 188 | break; |
| 189 | } |
| 190 | this.rtcPeerConnection.setRemoteDescription(new RTCSessionDescription( |
| 191 | {'type': 'answer', 'sdp': sdpFb.payload()})); |
| 192 | break; |
Philipp Schrader | e625ba2 | 2020-11-16 20:11:37 -0800 | [diff] [blame^] | 193 | case Payload.WebSocketIce: |
| 194 | const iceFb = message.payload(new WebSocketIce()); |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 195 | const candidate = {} as RTCIceCandidateInit; |
| 196 | candidate.candidate = iceFb.candidate(); |
| 197 | candidate.sdpMid = iceFb.sdpMid(); |
| 198 | candidate.sdpMLineIndex = iceFb.sdpMLineIndex(); |
| 199 | this.rtcPeerConnection.addIceCandidate(candidate); |
| 200 | break; |
| 201 | default: |
| 202 | console.log('got an unknown message'); |
| 203 | break; |
| 204 | } |
| 205 | } |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 206 | |
| 207 | /** |
Alex Perry | b49a3fb | 2020-02-29 15:26:54 -0800 | [diff] [blame] | 208 | * Subscribes to messages. Only the most recent connect message is in use. Any |
| 209 | * channels not specified in the message are implicitely unsubscribed. |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 210 | * @param a Finished flatbuffer.Builder containing a Connect message to send. |
| 211 | */ |
| 212 | sendConnectMessage(builder: any) { |
Alex Perry | 3dfcb81 | 2020-03-04 19:32:17 -0800 | [diff] [blame] | 213 | const array = builder.asUint8Array(); |
Alex Perry | 6249aaf | 2020-02-29 14:51:49 -0800 | [diff] [blame] | 214 | this.dataChannel.send(array.buffer.slice(array.byteOffset)); |
| 215 | } |
Alex Perry | b3b5079 | 2020-01-18 16:13:45 -0800 | [diff] [blame] | 216 | } |