Integrating WebSocket with Frameworks

import { useEffect, useRef, useState } from "react";
export function useWebSocket(url: string) {
  const ref = useRef<WebSocket | null>(null);
  const [state, setState] = useState<"connecting"|"open"|"closed">("connecting");
  useEffect(() => {
    const ws = new WebSocket(url);
    ref.current = ws;
    ws.addEventListener("open",  () => setState("open"));
    ws.addEventListener("close", () => setState("closed"));
    return () => ws.close(1000, "unmount");
  }, [url]);
  return { ws: ref.current, state };
}

import { onMounted, onUnmounted, ref } from "vue";
export function useWs(url: string) {
  const state = ref<"connecting"|"open"|"closed">("connecting");
  let ws: WebSocket | null = null;
  onMounted(() => {
    ws = new WebSocket(url);
    ws.addEventListener("open",  () => state.value = "open");
    ws.addEventListener("close", () => state.value = "closed");
  });
  onUnmounted(() => ws?.close(1000, "unmount"));
  return { state };
}

import { Injectable } from "@angular/core";
import { webSocket, WebSocketSubject } from "rxjs/webSocket";
@Injectable({ providedIn: "root" })
export class WsService {
  private sock: WebSocketSubject<unknown> = webSocket("wss://api.example.com/ws");
  messages$ = this.sock.asObservable();
  send(msg: unknown) { this.sock.next(msg); }
}

import asyncio, websockets

async def handler(ws):
    async for msg in ws:
        await ws.send(f"echo:{msg}")

async def main():
    async with websockets.serve(handler, "0.0.0.0", 8080):
        await asyncio.Future()

asyncio.run(main())

package main

import (
    "net/http"
    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true },
}

func handle(w http.ResponseWriter, r *http.Request) {
    c, _ := upgrader.Upgrade(w, r, nil)
    defer c.Close()
    for {
        mt, msg, err := c.ReadMessage()
        if err != nil { return }
        c.WriteMessage(mt, msg)
    }
}

func main() {
    http.HandleFunc("/ws", handle)
    http.ListenAndServe(":8080", nil)
}

@Configuration
@EnableWebSocket
public class WsConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry r) {
        r.addHandler(new EchoHandler(), "/ws").setAllowedOrigins("*");
    }
}

public class EchoHandler extends TextWebSocketHandler {
    @Override
    public void handleTextMessage(WebSocketSession s, TextMessage m) throws IOException {
        s.sendMessage(new TextMessage("echo:" + m.getPayload()));
    }
}

// shared-worker.js
const ws = new WebSocket("wss://api.example.com/ws");
const ports = new Set();
onconnect = (e) => {
  const port = e.ports[0]; ports.add(port);
  port.onmessage = (ev) => ws.send(ev.data);
};
ws.addEventListener("message", (e) => { for (const p of ports) p.postMessage(e.data); });