websocket-text-relay 1.0.0

package/src/ui/js/util/WebsocketClient.js

@@ -0,0 +1,76 @@
+import { EventEmitter } from './EventEmitter.js'
+
+const RECONNECT_DELAY_SECONDS = 1
+
+export class WebsocketClient {
+  constructor ({port, host = "localhost", protocol = "ws"}) {
+    this.port = port
+    this.host = host
+    this.protocol = protocol
+    this.emitter = new EventEmitter()
+    this.sessionMessages = []
+    this.socket = null
+    this.socketOpen = false
+
+    this._onSocketOpen = this.onSocketOpen.bind(this)
+    this._onSocketMessage = this.onSocketMessage.bind(this)
+    this._onSocketError = this.onSocketError.bind(this)
+    this._onSocketClose = this.onSocketClose.bind(this)
+
+    this.startClient()
+  }
+
+  getUrl () {
+    return `${this.protocol}://${this.host}:${this.port}`
+  }
+
+  startClient () {
+    this.socket = new WebSocket(this.getUrl())
+    this.socket.addEventListener('open', this._onSocketOpen)
+    this.socket.addEventListener('message', this._onSocketMessage)
+    this.socket.addEventListener('error', this._onSocketError)
+    this.socket.addEventListener('close', this._onSocketClose)
+  }
+
+  onSocketOpen () {
+    console.log("websocket client connected")
+    this.socketOpen = true
+    this.emitter.emit("socket-open")
+    this.sessionMessages.forEach(msgStr => this.socket.send(msgStr))
+  }
+
+  onSocketClose () {
+    console.log(`websocket text relay connection closed. Retrying connection in ${RECONNECT_DELAY_SECONDS} second${RECONNECT_DELAY_SECONDS === 1 ? "" : "s"}...`)
+    if (this.socket == null) { return }
+    this.emitter.emit("socket-close")
+    this.socketOpen = false
+    this.socket.removeEventListener('open', this._onSocketOpen)
+    this.socket.removeEventListener('message', this._onSocketMessage)
+    this.socket.removeEventListener('error', this._onSocketError)
+    this.socket.removeEventListener('close', this._onSocketClose)
+    this.socket = null
+    setTimeout(() => this.startClient(), RECONNECT_DELAY_SECONDS * 1000)
+  }
+
+  onSocketMessage (event) {
+    let message
+    try {
+      message = JSON.parse(event.data)
+    } catch (e) {
+      console.error("Error parsing websocket message JSON", e)
+      return
+    }
+    this.emitter.emit('message', message)
+  }
+
+  onSocketError (error) {
+    console.error("websocket text relay connection error: ", error)
+  }
+
+  sendMessage (message) {
+    const messageStr = JSON.stringify(message)
+    this.sessionMessages.push(messageStr)
+    if (!this.socketOpen) { return }
+    this.socket.send(messageStr)
+  }
+}

package/src/ui/js/util/constants.js

@@ -0,0 +1,9 @@
+const { exportDeps } = window.__WTR__
+
+const constants = {
+  innerRingRadius: .33,
+  outerRingRadius: 0.6,
+  outerArcSize: 0.175,
+}
+
+exportDeps({constants})

package/src/ui/js/util/drawing.js

@@ -0,0 +1,128 @@
+const { exportDeps } = window.__WTR__
+
+const TWO_PI = 2 * Math.PI
+const MAX_ANGLE_DELTA = .99999
+
+const drawSvgElement = (tagName, attributes = {}, className, parentNode) => {
+  const element = document.createElementNS("http://www.w3.org/2000/svg", tagName)
+
+  if (className && className.length > 0) {
+    if (Array.isArray(className)) {
+      element.classList.add(...className)
+    } else {
+      element.classList.add(className)
+    }
+  }
+
+  Object.entries(attributes).forEach(([name, val]) => {
+    if (val != null) {
+      element.setAttribute(name, val)
+    }
+  })
+
+  if (parentNode) {
+    parentNode.append(element)
+  }
+
+  return element
+}
+
+const drawText = ({x, y, text, dominantBaseline, textAnchor, className, parentNode}) => {
+  const textElement = drawSvgElement("text", {x, y, "dominant-baseline": dominantBaseline, "text-anchor": textAnchor}, className, parentNode)
+  textElement.innerHTML = text
+  return textElement
+}
+
+const drawLine = ({x1, y1, x2, y2, className, parentNode}) => {
+  return drawSvgElement("line", {x1, y1, x2, y2}, className, parentNode)
+}
+
+const drawCircle = ({cx, cy, r, className, parentNode}) => {
+  return drawSvgElement("circle", {cx, cy, r}, className, parentNode)
+}
+
+const coordsToPathData = (coords) => "M " + coords.map(coord => coord.join(',')).join(" L ")
+
+const drawLinearPath = ({coords, className, parentNode}) => {
+  const d = coordsToPathData(coords)
+  return drawSvgElement("path", {d}, className, parentNode)
+}
+
+const drawPolarLine = ({startAngle, startRadius, endAngle, endRadius, className, parentNode}) => {
+  const startAngleRadians = (startAngle % 1) * TWO_PI
+  const endAngleRadians = (endAngle % 1) * TWO_PI
+  const x1 = Math.cos(startAngleRadians) * startRadius
+  const y1 = -Math.sin(startAngleRadians) * startRadius
+  const x2 = Math.cos(endAngleRadians) * endRadius
+  const y2 = -Math.sin(endAngleRadians) * endRadius
+
+  return drawSvgElement("line", {x1, y1, x2, y2}, className, parentNode)
+}
+
+const drawPolarCircle = ({angle, radius, r, className, parentNode}) => {
+  const angleRadians = (angle % 1) * TWO_PI
+  const cx = Math.cos(angleRadians) * radius
+  const cy = -Math.sin(angleRadians) * radius
+
+  return drawSvgElement("circle", {cx, cy, r}, className, parentNode)
+}
+
+const polarToCartesian = (angle, radius) => {
+  const angleRadians = (angle % 1) * TWO_PI
+  const x = Math.cos(angleRadians) * radius
+  const y = -Math.sin(angleRadians) * radius
+  return [x, y]
+}
+
+const drawWedge = ({startAngle, angleDelta, innerRadius, radiusDelta, className, parentNode}) => {
+  if (angleDelta < 0) { angleDelta = 0 }
+  if (angleDelta > MAX_ANGLE_DELTA) {angleDelta = MAX_ANGLE_DELTA }
+
+  const startAngleRadians = (startAngle % 1) * TWO_PI
+  const endAngleRadians = ((startAngle + angleDelta) % 1) * TWO_PI
+  const outerRadius = innerRadius + radiusDelta
+  const largeArcFlag = (angleDelta % 1) > .5 ? "1" : "0"
+
+  const startX1 = Math.cos(startAngleRadians) * innerRadius
+  const startY1 = -Math.sin(startAngleRadians) * innerRadius
+  const startX2 = Math.cos(startAngleRadians) * outerRadius
+  const startY2 = -Math.sin(startAngleRadians) * outerRadius
+  const endX1 = Math.cos(endAngleRadians) * innerRadius
+  const endY1 = -Math.sin(endAngleRadians) * innerRadius
+  const endX2 = Math.cos(endAngleRadians) * outerRadius
+  const endY2 = -Math.sin(endAngleRadians) * outerRadius
+
+  const d = `
+M ${startX1} ${startY1},
+A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${endX1} ${endY1},
+L ${endX2} ${endY2},
+A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${startX2} ${startY2},
+Z
+`
+
+  return drawSvgElement("path", {d}, className, parentNode)
+}
+
+const triangleHeight = 0.06
+const verticalPadding = 0.01
+const horizontalPadding = 0.04
+
+const drawToolTip = ({x, y, text, direction = "below", parentNode}) => {
+  const directionMultiplier = direction === "above" ? -1 : 1
+  const tooltipDisplayGroup = drawSvgElement("g", undefined, "tooltip_display_group", parentNode)
+  const bgPlaceholder = drawSvgElement("g", undefined, undefined, tooltipDisplayGroup)
+  const textY = y + (triangleHeight + verticalPadding) * directionMultiplier
+  const textElement = drawText({x, y: textY, text, className: "tooltip_text", parentNode: tooltipDisplayGroup})
+  const textBbox = textElement.getBBox()
+  const rectAttributes = {
+    x: textBbox.x - horizontalPadding,
+    y: textBbox.y - verticalPadding,
+    width: textBbox.width + horizontalPadding * 2,
+    height: textBbox.height + verticalPadding * 2,
+    rx: 0.015
+  }
+  drawSvgElement("rect", rectAttributes, "tooltip_outline", bgPlaceholder)
+}
+
+exportDeps({drawSvgElement, drawLine, drawCircle, drawLinearPath, drawPolarLine, drawPolarCircle, drawWedge,
+  drawText, polarToCartesian, coordsToPathData, drawToolTip})

package/src/websocket-interface/WebsocketClient.js

@@ -0,0 +1,56 @@
+import WebSocket from 'ws'
+
+export class WebsocketClient {
+  constructor ({port, wsInterfaceEmitter, host = "localhost", protocol = "ws"}) {
+    this.port = port
+    this.host = host
+    this.protocol = protocol
+    this.wsInterfaceEmitter = wsInterfaceEmitter
+    this.socket = null
+    this.socketOpen = false
+
+    this._onSocketOpen = this.onSocketOpen.bind(this)
+    this._onSocketMessage = this.onSocketMessage.bind(this)
+    this._onSocketClose = this.onSocketClose.bind(this)
+
+    this.startClient()
+  }
+
+  getUrl () {
+    return `${this.protocol}://${this.host}:${this.port}`
+  }
+
+  startClient () {
+    this.socket = new WebSocket(this.getUrl())
+    this.socket.addEventListener('open', this._onSocketOpen)
+    this.socket.addEventListener('message', this._onSocketMessage)
+    this.socket.addEventListener('close', this._onSocketClose)
+  }
+
+  onSocketOpen () {
+    this.socketOpen = true
+  }
+
+  onSocketClose () {
+    this.socketOpen = false
+    this.socket.removeEventListener('open', this._onSocketOpen)
+    this.socket.removeEventListener('message', this._onSocketMessage)
+    this.socket.removeEventListener('close', this._onSocketClose)
+  }
+
+  onSocketMessage (event) {
+    let message
+    try {
+      message = JSON.parse(event.data)
+    } catch (e) {
+      console.error("Error parsing websocket message JSON", e)
+      return
+    }
+    this.wsInterfaceEmitter.emit('message', message)
+  }
+
+  sendMessage (message) {
+    const messageStr = JSON.stringify(message)
+    this.socket.send(messageStr)
+  }
+}

package/src/websocket-interface/WebsocketInterface.js

@@ -0,0 +1,71 @@
+import { WebsocketClient } from "./WebsocketClient.js"
+import { WtrSession } from "./WtrSession.js"
+import { apiMethods } from "./websocketApi.js"
+import { createWebsocketServer } from "./websocketServer.js"
+import {EventEmitter} from 'node:events'
+
+const watchActiveFilesMessage = { method: "watch-editor-active-files" }
+
+export class WebsocketInterface {
+  constructor ({port}) {
+    this.port = port
+    this.emitter = new EventEmitter() // emits "message" events from the server
+    this.initMessage = null
+    this.openFileListMessage = null
+    this.serverSession = null
+    this.wsClient = null
+
+    this._onSocketClose = this._onSocketClose.bind(this)
+    this._sendQueuedMessages = this._sendQueuedMessages.bind(this)
+
+    this._startInterface()
+  }
+
+  sendInitMessage (initMessage) {
+    this.initMessage = initMessage
+    this._sendMessageToServer(initMessage)
+  }
+
+  sendOpenFileList (files) {
+    this.openFileListMessage = {method: "update-open-files", files}
+    this._sendMessageToServer(this.openFileListMessage)
+  }
+
+  sendText ({file, contents}) {
+    const sendTextMessage = {method: "relay-text", file, contents}
+    this._sendMessageToServer(sendTextMessage)
+  }
+
+  async _startInterface () {
+    try {
+      await createWebsocketServer(this.port)
+      this.serverSession = new WtrSession({apiMethods, wsInterfaceEmitter: this.emitter})
+      this._sendQueuedMessages()
+    } catch (e) {
+      this.wsClient = new WebsocketClient({port: this.port, wsInterfaceEmitter: this.emitter})
+      this.wsClient.socket.on('close', this._onSocketClose)
+      this.wsClient.socket.on('open', this._sendQueuedMessages)
+    }
+  }
+
+  _onSocketClose () {
+    this.wsClient.socket.removeEventListener("close", this._onSocketClose)
+    this.wsClient.socket.removeEventListener("open", this._sendQueuedMessages)
+    this.wsClient = null
+    this._startInterface()
+  }
+
+  _sendQueuedMessages () {
+    this._sendMessageToServer(watchActiveFilesMessage)
+    if (this.initMessage) { this._sendMessageToServer(this.initMessage) }
+    if (this.openFileListMessage) { this._sendMessageToServer(this.openFileListMessage) }
+  }
+
+  _sendMessageToServer (message) {
+    if (this.serverSession) {
+      this.serverSession._handleApiMessage(message)
+    } else if (this.wsClient && this.wsClient.socketOpen){
+      this.wsClient.sendMessage(message)
+    }
+  }
+}

package/src/websocket-interface/WtrSession.js

@@ -0,0 +1,122 @@
+import { EventEmitter } from 'node:events'
+import { getNextId } from "./util.js"
+import { startSessionStatus, endSessionStatus, statusEvents, removeWatchedFileLinks } from './sessionManager.js'
+
+export class WtrSession {
+  constructor ({apiMethods, wsConnection, wsInterfaceEmitter}) {
+    this.apiMethods = apiMethods
+    this.wsConnection = wsConnection
+    this.wsInterfaceEmitter = wsInterfaceEmitter
+    this.id = getNextId()
+    this.emitter = new EventEmitter()
+    this.watchedFiles = new Set()
+    this.openFiles = new Set()
+    this.activeOpenFiles = new Map()
+
+    this.watchActiveFiles = false
+    this.watchLogMessages = false
+    this.watchWtrActivity = false
+    this.watchWtrStatus = false
+
+    this._subscribeToEvents()
+    startSessionStatus(this)
+  }
+
+  sendMessageToClient (message) {
+    if (this.wsConnection) {
+      this.wsConnection.send(JSON.stringify(message))
+    } else {
+      this.wsInterfaceEmitter.emit('message', message)
+    }
+  }
+
+  isServer () {
+    return this.wsInterfaceEmitter != null
+  }
+
+  _subscribeToEvents = () => {
+    this.emitter.on('log', this._onLog.bind(this))
+    this.emitter.on('editor-active-files-update', this._onEditorActiveFilesUpdate.bind(this))
+
+    this._onActivityUpdate = this._onActivityUpdate.bind(this)
+    statusEvents.on('activity-update', this._onActivityUpdate)
+    this._onStatusUpdate = this._onStatusUpdate.bind(this)
+    statusEvents.on('status-update', this._onStatusUpdate)
+
+    if (this.wsConnection) {
+      this._onWsMessage = this._onWsMessage.bind(this)
+      this._onWsClose = this._onWsClose.bind(this)
+      this.wsConnection.on('message', this._onWsMessage)
+      this.wsConnection.on('close', this._onWsClose)
+      this.wsConnection.on('error', this._onWsClose)
+    }
+  }
+
+  _onWsClose () {
+    if (this.wsConnection) {
+      this.wsConnection.removeListener('message', this._onWsMessage)
+      this.wsConnection.removeListener('close', this._onWsClose)
+      this.wsConnection.removeListener('error', this._onWsClose)
+    }
+
+    statusEvents.removeListener('activity-update', this._onEditorActiveFilesUpdate)
+    statusEvents.removeListener('status-update', this._onStatusUpdate)
+
+    endSessionStatus(this)
+    for (const endsWith of this.watchedFiles) {
+      removeWatchedFileLinks(this, endsWith)
+    }
+
+    this.emitter.removeAllListeners()
+  }
+
+  _onLog (data) {
+    if (!this.watchLogMessages) { return }
+    this.sendMessageToClient({ method: "watch-log-messages", data })
+  }
+
+  _onEditorActiveFilesUpdate (files) {
+    if (!this.watchActiveFiles) { return }
+    this.sendMessageToClient({ method: "watch-editor-active-files", files })
+  }
+
+  _onActivityUpdate (data) {
+    if (!this.watchWtrActivity) { return }
+    this.sendMessageToClient({ method: "watch-wtr-activity", data })
+  }
+
+  _onStatusUpdate (data) {
+    if (!this.watchWtrStatus) { return }
+    this.sendMessageToClient({ method: "watch-wtr-status", data })
+  }
+
+  _onWsMessage (dataBuf) {
+    const str = dataBuf.toString()
+    let message
+
+    try {
+      message = JSON.parse(str)
+    } catch (e) {
+      this.emitter.emit('log', { level: "error", text: `Could not parse JSON message: ${str}` })
+      return
+    }
+
+    this._handleApiMessage(message)
+  }
+
+  _handleApiMessage (message) {
+    const method = message && message.method
+    const methodHandler = this.apiMethods.get(method)
+    if (!methodHandler) {
+      this.emitter.emit('log', { level: "error", text: `unknown ws api method: ${method}` })
+      return
+    }
+
+    try {
+      methodHandler(this, message)
+    } catch (e) {
+      this.emitter.emit('log', { level: "error", text: `Error while handling method: ${method} : ${e.stacktrace}` })
+      console.error("Error while handling ws api method", method, e)
+    }
+  }
+}

package/src/websocket-interface/httpServer.js

@@ -0,0 +1,58 @@
+import { createServer } from 'node:http'
+import path from 'node:path'
+import fs from 'node:fs'
+import * as url from 'node:url'
+const parentDir = url.fileURLToPath(new URL('..', import.meta.url))
+
+const uiDirName = "ui"
+const uiDirPath = path.join(parentDir, uiDirName)
+
+const allowedFileTypes = new Map([
+  ["html", "text/html"],
+  ["css", "text/css"],
+  ["js", "application/javascript"],
+  ["json", "application/json"],
+  ["png", "image/png"],
+  ["ttf", "font/ttf"],
+])
+
+const getFilePath = (url) => {
+  url = url === "/" ? "./index.html" : "." + url
+  return path.join(uiDirPath, url)
+}
+
+const getFileType = (fileUrl) => {
+  const lastDotIndex = fileUrl.lastIndexOf(".")
+  if (lastDotIndex < 0 || lastDotIndex >= fileUrl.length) { return "" }
+  return fileUrl.substring(lastDotIndex + 1)
+}
+
+const requestHandler = (req, res) => {
+  const filePath = getFilePath(req.url)
+  const fileType = getFileType(filePath)
+  const contentType = allowedFileTypes.get(fileType)
+  if (!contentType) {
+    res.writeHead(404)
+    res.end("NOT FOUND!")
+    return
+  } 
+  res.setHeader("Content-Type", contentType)
+  res.writeHead(200)
+  const fileStream = fs.createReadStream(filePath)
+  fileStream.pipe(res)
+}
+
+export const createHttpServer = (port) => {
+  return new Promise((resolve, reject) => {
+    
+    const server = createServer(requestHandler)
+
+    server.on("error", (e) => {
+      reject(e)
+    })
+
+    server.listen(port, () => {
+      resolve(server)
+    })
+  })
+}

package/src/websocket-interface/sessionManager.js

@@ -0,0 +1,107 @@
+import { EventEmitter } from 'node:events'
+import { debounce } from './util.js'
+
+export const statusEvents = new EventEmitter()
+
+export const wtrSessions = new Set()
+
+const createUpdateObject = () => {
+  const sessions = [...wtrSessions].map((wtrSession) => {
+
+    const openFileLinks = {}
+    for (const [editorFile, fileLinks] of wtrSession.activeOpenFiles) {
+      if (!openFileLinks[editorFile]) {
+        openFileLinks[editorFile] = []
+      }
+      for (const {clientSession, endsWith} of fileLinks.values()) {
+        openFileLinks[editorFile].push({clientId: clientSession.id, endsWith})
+      }
+    }
+
+    return {
+      name: wtrSession.name || "Uninitialized",
+      id: wtrSession.id,
+      editorPid: wtrSession.editorPid,
+      lsPid: wtrSession.lsPid,
+      isServer: wtrSession.isServer(),
+      watchCount: wtrSession.watchedFiles.size,
+      openCount: wtrSession.openFiles.size,
+      openFileLinks
+    }
+  })
+
+  return {sessions}
+}
+
+const sendUpdate = () => {
+  const updateObject = createUpdateObject()
+  statusEvents.emit('status-update', updateObject)
+}
+
+export const triggerStatusUpdate = debounce(100, sendUpdate)
+
+export const startSessionStatus = (wtrSession) => {
+  wtrSessions.add(wtrSession)
+  triggerStatusUpdate()
+}
+
+export const endSessionStatus = (wtrSession) => {
+  wtrSessions.delete(wtrSession)
+  triggerStatusUpdate()
+}
+
+const createLinkKey = (clientSession, endsWith) => `${clientSession.id}:${endsWith}`
+
+const createWatchLink = (wtrSession, editorFile, clientSession, endsWith) => {
+  let fileLinks = wtrSession.activeOpenFiles.get(editorFile)
+  if (!fileLinks) {
+    fileLinks = new Map()
+    wtrSession.activeOpenFiles.set(editorFile, fileLinks)
+  }
+  const linkKey = createLinkKey(clientSession, endsWith)
+  fileLinks.set(linkKey, { clientSession, endsWith })
+  triggerStatusUpdate()
+  wtrSession.emitter.emit('editor-active-files-update', [...wtrSession.activeOpenFiles.keys()])
+}
+
+export const addOpenedFileLinks = (wtrSession, editorFile) => {
+  for (const clientSession of wtrSessions) {
+    if (clientSession === wtrSession) { continue }
+    for (const endsWith of clientSession.watchedFiles) {
+      if (editorFile.endsWith(endsWith)) {
+        createWatchLink(wtrSession, editorFile, clientSession, endsWith)
+      }
+    }
+  }
+}
+
+export const removeOpenedFileLinks = (wtrSession, editorFile) => {
+  wtrSession.activeOpenFiles.delete(editorFile)
+  wtrSession.emitter.emit('editor-active-files-update', [...wtrSession.activeOpenFiles.keys()])
+  triggerStatusUpdate()
+}
+
+export const addWatchedFileLinks = (clientSession, endsWith) => {
+  for (const wtrSession of wtrSessions) {
+    if (wtrSession === clientSession) { continue }
+    for (const editorFile of wtrSession.openFiles) {
+      if (editorFile.endsWith(endsWith)) {
+        createWatchLink(wtrSession, editorFile, clientSession, endsWith)
+      }
+    }
+  }
+}
+
+export const removeWatchedFileLinks = (clientSession, endsWith) => {
+  const linkKey = createLinkKey(clientSession, endsWith)
+  for (const wtrSession of wtrSessions) {
+    for (const [editorFile, fileLinks] of wtrSession.activeOpenFiles) {
+      fileLinks.delete(linkKey)
+      if (fileLinks.size === 0) {
+        wtrSession.activeOpenFiles.delete(editorFile)
+        wtrSession.emitter.emit('editor-active-files-update', [...wtrSession.activeOpenFiles.keys()])
+        triggerStatusUpdate()
+      }
+    }
+  }
+}

package/src/websocket-interface/util.js

@@ -0,0 +1,12 @@
+// this version of the function does not handle function arguments because it was not needed for this app
+export const debounce = (timeout, func) => {
+  let timeoutHandle = null
+  return () => {
+    clearTimeout(timeoutHandle)
+    timeoutHandle = setTimeout(func, timeout)
+  }
+}
+
+// first ID returned is 0 and increases every time function is called
+let currentId = 0
+export const getNextId = () => currentId++