p2p_streams_channel 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a8bda1bfc27255440985ebe30c675e2177ca08bf446b75d6ae9a7cfa5c619c59
+  data.tar.gz: 4fd9269cf47645dff407538bb4a817c490623bed92b63f3a691c71c1ea8159c1
+SHA512:
+  metadata.gz: 7df5626c1517a3a18a8d495a2ac2d22bdbd1e7fe3c3f04a87b0ff02eed8b33c9c9c3a3f683b14c86ad157960ce2bb8f058fdd841c6ece438115bc6c098f01020
+  data.tar.gz: '082a674eb465701535db76a9d4772658f4bef2dc7b7246e2628ad1afd7af55731259c9041b0e58c9b13840b6f823cd07a4037f9ffa9b85c785285d3b78eaad29'

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/README.md

@@ -0,0 +1,210 @@
+# P2pStreamsChannel
+
+Allow to setup one-to-many P2P stream connections ([WebRTC](https://webrtc.org/)) between clients through Rails server (ActionCable) as the signaling server. 
+
+## Work Flow
+
+
+```
+===================================
+Connect to Signaling Server (Rails)
+===================================
+
+host-user -------------------------------------> Rails server
+host-user <-----views/chat_room----------------- Rails server
+            (session: chat_room, peer_id: host_user)
+host-user ---turbo-connect-stream--------------> Rails server/ActionCable
+
+client-user -----------------------------------> Rails server
+client-user <-----views/chat_room--------------- Rails server
+        (session: chat_room, peer_id: client_user)
+client-user ---turbo-connect-stream------------> Rails server/ActionCable
+
+...
+other clients
+...
+
+
+===========
+Negotiation
+===========
+
+host-user ------SessionReady--> Rails Server --> client-user
+client-user ----SessionReady--> Rails Server --> host-user
+host-user --setupRTCPeerConnection --+
+       <-----------------------------+  
+
+host-user ------SdpOffer -----> Rails Server --> client-user
+client-user --setupRTCPeerConnection --+
+        <------------------------------+  
+
+client-user ----SdpAnswer ----> Rails Server --> host-user
+
+iceServers --ice-candidate----> host-user ----> client-user
+iceServers --ice-candidate----> client-user --> host-user
+
+
+=========
+Connected
+=========
+
+After client-user connected to the host-user, all of them will disconnected to the signaling server (in order to save memory and other things), only the host-user keep connect to Rails server.
+In case you want keep client connection, you could set params `keepCableConnection: true` to the p2p-frame.
+
+client-user1 ----X disconnect from -----> Rails server Action cable
+client-user2 ----X disconnect from -----> Rails server Action cable
+...
+host-user <-------keep connect to ------> Rails server Action cable
+
+This is one-to-many p2p connections:
+client-user1 --- send message 'hi' ---> host-user
+host-user --- send message {user1: 'hi'} to --> others
+
+
+============
+Disconnected
+============
+
+client-user1 ---X disconnect ---> host-user
+host-user ---> send client-user1 status ---> others
+
+client-user1 ----reload --------> Rails server
+host-user <--- start re-negotiating through Rails server ----> client-user1
+
+
+host-user ---X disconnect ---> Rails server
+all client-users will be disconnected
+the first client-user re-connect to Rails server will become the new host
+and start work-flow again
+
+```
+
+## Installation
+
+```ruby
+$ gem "p2p_streams_channel"
+$ bundle isntall
+$ rails g p2p_streams_channel:install
+```
+
+## Usage
+
+Create a Stimulus P2pController in which you will receive other p2p-connections status, data send by other connected connections, and send your data to others.
+```ruby
+$ rails g p2p_streams_channel:controller chat
+# it will create js file `app/javascript/controllers/chat_controller.js`
+```
+
+Render a p2p-frame-tag
+```ruby
+# views/chat_rooms/_chat_room.html.erb
+<%= p2p_frame_tag(
+    session_id: dom_id(chat_room), 
+    peer_id: dom_id(current_user),
+    # config: {
+        # ice_servers: [
+		#     { urls: ["stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"] },
+	    # ],
+        # heartbeat: {
+        #     interval_mls: 100,
+        #     idle_timeout_mls: 200 
+        # },
+        # keepCableConnection: false
+    # }
+) do %>
+    <div data-controller="chat">
+        # chat room views
+    </div>
+<% end %>
+```
+
+
+Now you could implement your client side, 
+for example: here is a simple chat controller:
+
+
+```js
+// app/javascript/controllers/chat_controller.js
+import { P2pController } from "p2p"
+export default class extends P2pController {
+    //
+    // p2p callbacks
+    //
+    p2pNegotiating() {
+        // your peer start to negotiate with the host through ActionCable
+        console.log("NEGOTIATING ...")
+        this.showConnecting()
+    }
+
+    p2pConnecting() {
+        // your peer is connecting directly with the host peer
+        console.log("CONNECTING ...")
+    }
+
+    p2pConnected() {
+        // your peer's connected to the host peer
+        // from now you could start send message to the other through the host peer
+        console.log("CONNECTED ...")
+        this.hideConnecting()
+        this.showChatBox()
+    }
+
+    p2pDisconnected() {
+        // your peer's disconnected from the host peer
+        this.showConnecting()
+    }
+
+    p2pClosed() {}
+
+    p2pError() {}
+
+    // receiving message from the other through the host peer
+    p2pReceivedMessage(message) {
+        switch(message["type"]) {
+            case "Data":
+                // message["data"]: the text message
+                const chatLine = document.createElement("div")
+                chatLine.innerText = `${message["senderId"]}: ${message["data"]}`
+                this.chatBoxTarget.append(chatLine)
+                break
+            case "Data.Connection.State":
+                // message["data"]: the current connection state of other peers
+                for (let [peer, state] of Object.entries(message["data"])) {
+                    this.updatePeerState(peer, state)
+                }
+                break
+            default:
+                break
+        }
+    }
+
+    //
+    // send message to the others through the host peer:
+    // for example:
+    // send-button in message box will trigger this action
+    send() {
+        this.p2pSendMessage(this.messageBoxTarget.value)
+        this.messageBoxTarget.value = ""
+    }
+
+    // others:
+    // this.iamHost: your peer is the host or not
+    // this.peerId: your peer id
+    // this.hostPeerId: the host peer id
+    //
+}
+```
+
+## Development
+
+run test:
+```ruby
+$ cd spec/dummy
+$ rails g p2p_streams_channel:install
+$ cd ../..
+$ rake spec
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/p2p_streams_channel.

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/app/assets/javascripts/p2p/index.js

@@ -0,0 +1,6 @@
+import "p2p/p2p_frame"
+import P2pController from "p2p/p2p_controller"
+
+export { 
+    P2pController
+}

data/app/assets/javascripts/p2p/message.js

@@ -0,0 +1,22 @@
+export const ConnectionState = {
+    SessionJoin: "SessionJoin",
+    SessionReady: "SessionReady",
+    SdpOffer: "SdpOffer",
+    SdpAnswer: "SdpAnswer",
+    IceCandidate: "IceCandidate",
+    Error: "Error",
+    New: "new",
+    Negotiating: "negotiating",
+    Connecting: "connecting",
+    Connected: "connected",
+    DisConnected: "disconnected",
+    Closed: "closed",
+    Failed: "failed",
+}
+
+export const MessageType = {
+    Connection: "Connection",
+    Heartbeat: "Heartbeat",
+    Data: "Data",
+    DataConnectionState: "Data.Connection.State",
+}

data/app/assets/javascripts/p2p/p2p_connection.js

@@ -0,0 +1,133 @@
+import { ConnectionState, MessageType } from "p2p/message"
+
+const ICE_CONFIG = {
+    iceServers: [
+		{ 
+            urls: ["stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"]
+        },
+	],
+}
+
+export default class P2pConnection {
+    constructor(peer, clientId, hostId, iamHost, iceConfig, heartbeatConfig) { // TODO: add heartbeatInterval to config
+        this.peer = peer
+        this.clientId = clientId
+        this.hostId = hostId
+        this.iamHost = iamHost
+        this.state = ConnectionState.New
+        this.lastTimeUpdate = 0
+        this.iceConfig = iceConfig || ICE_CONFIG
+        this.heartbeatConfig = heartbeatConfig
+    }
+
+    setupRTCPeerConnection() {
+        // console.log("connection start ...")
+        this.rtcPeerConnection = new RTCPeerConnection(this.iceConfig)
+
+        this.rtcPeerConnection.onicecandidate = event => {
+            // console.log(event)
+            if (event.candidate) {
+                let ice = {}
+                ice[ConnectionState.IceCandidate] = event.candidate
+                this.peer.signal(ConnectionState.IceCandidate, ice)
+            }
+        }
+        this.rtcPeerConnection.oniceconnectionstatechange = event => {
+            // console.log(event)
+        }
+
+        this.rtcPeerConnection.onconnectionstatechange = (ev) => {
+            // console.log(`onconnectionstatechange ${this.rtcPeerConnection.connectionState}`)
+            this.state = this.rtcPeerConnection.connectionState
+            if (this.state == ConnectionState.DisConnected || this.state == ConnectionState.Closed) {
+                this.close()
+            }
+            this.peer.updateP2pConnectionState(this)
+          }
+        
+        this.sendDataChannel = this.rtcPeerConnection.createDataChannel("sendChannel")
+        this.sendDataChannelOpen = false
+        this.sendDataChannel.onopen = this.handleSendChannelStatusChange.bind(this)
+        this.sendDataChannel.onclose = this.handleSendChannelStatusChange.bind(this)
+
+        this.rtcPeerConnection.ondatachannel = event => {
+            // console.log("ondatachannel p2p ...")
+            this.receiveDataChannel = event.channel
+            this.receiveDataChannel.onmessage = this.receiveP2pMessage.bind(this)
+            this.receiveDataChannel.onopen = this.handleReceiveChannelStatusChange.bind(this)
+            this.receiveDataChannel.onclose = this.handleReceiveChannelStatusChange.bind(this)
+            
+            this.peer.updateP2pConnectionState(this)
+        }
+
+        return this.rtcPeerConnection
+    }
+
+    receiveP2pMessage(event) {
+        // console.log(`p2p received msg: ${event.data}`)
+        const msg = JSON.parse(event.data)
+        switch (msg.type) {
+            case MessageType.Heartbeat:
+                this.state = ConnectionState.Connected
+                this.lastTimeUpdate = Date.now()
+                break
+            default:
+                this.peer.receivedP2pMessage(msg)
+                break
+        }
+    }
+
+    sendP2pMessage(message, type = MessageType.Data, senderId = null) {
+        if (this.sendDataChannel && this.sendDataChannelOpen) {
+            const msgJson = JSON.stringify({
+                type: type,
+                senderId: senderId || this.peer.peerId,
+                data: message
+            })
+            this.sendDataChannel.send(msgJson)
+        } else {
+            // console.warn("the send data channel is not available!")
+        }
+    }
+
+    handleSendChannelStatusChange(event) {
+        // console.log(event)
+        if (this.sendDataChannel) {
+            this.sendDataChannelOpen = this.sendDataChannel.readyState == "open"
+            if (this.sendDataChannelOpen && this.heartbeatConfig) {
+                this.scheduleHeartbeat()
+            }
+        }
+    }
+
+    handleReceiveChannelStatusChange(event) {
+        // console.log(event)
+    }
+
+    scheduleHeartbeat() {
+        this.heartbeat = setTimeout(() => {
+            this.sendHeartbeat()
+        }, this.heartbeatConfig.interval_mls)
+    }
+
+    sendHeartbeat() {
+        if (this.lastTimeUpdate > 0 && Date.now() - this.lastTimeUpdate > this.heartbeatConfig.idle_timeout_mls) {
+            // console.log("HEART-BEAT DETECT DISCONNECTED ............")
+            this.state = ConnectionState.DisConnected
+            this.peer.updateP2pConnectionState(this)
+        } else {
+            this.sendP2pMessage("ping", MessageType.Heartbeat)
+            this.scheduleHeartbeat()
+        }
+    }
+
+    stopHeartbeat() {
+        // console.log(`stop heartbeat ${this.hostId} <-> ${this.clientId}`)
+        clearTimeout(this.heartbeat)
+    }
+    
+    close() {
+        // console.log(`close the connection ${this.hostId} <-> ${this.clientId}`)
+        this.stopHeartbeat()
+    }
+}

data/app/assets/javascripts/p2p/p2p_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    connect() {
+        this.p2pSetup()
+    }
+
+    p2pSetup() {
+        this.p2pFrame = this.element.closest("p2p-frame")
+        if (this.p2pFrame) {
+            this.p2pFrame.setP2pListener(this)
+        } else {
+            throw new Error("Couldn't find p2p-frame!")
+        }
+    }
+
+    get peerId() {
+        this.p2pFrame.peer?.peerId
+    }
+    
+    get hostPeerId() {
+        this.p2pFrame.peer?.hostPeerId
+    }
+
+    get iamHost() {
+        this.p2pFrame.peer?.iamHost
+    }
+
+    // p2p callbacks
+    
+    p2pNegotiating() {}
+
+    p2pConnecting() {}
+
+    p2pConnected() {}
+
+    p2pDisconnected() {}
+
+    p2pClosed() {}
+
+    p2pError() {}
+
+    // send/received p2p message
+
+    p2pSendMessage(message) {
+        if (this.p2pFrame) {
+            this.p2pFrame.sendP2pMessage(message)
+        }
+    }
+
+    p2pReceivedMessage(message) {}
+}

data/app/assets/javascripts/p2p/p2p_frame.js

@@ -0,0 +1,152 @@
+import { Turbo, cable } from "@hotwired/turbo-rails"
+import P2pPeer from "p2p/p2p_peer"
+import { MessageType } from "p2p/message"
+
+class P2pFrameElement extends HTMLElement {
+    constructor() {
+      super()
+      this.listeners ||= []
+    }
+
+    // called each time the element is added to the document.
+    async connectedCallback() {
+      Turbo.connectStreamSource(this)
+      this.subscription = await cable.subscribeTo(this.channel, {
+        received: this.receiveSignal.bind(this),
+        connected: this.subscriptionConnected.bind(this),
+        disconnected: this.subscriptionDisconnected.bind(this)
+      }).catch(err => console.log(err))
+
+      this.peer = new P2pPeer(this.sessionId, this.peerId, this, this.subscription, this.iceConfig, this.heartbeatConfig)
+    }
+
+    // called each time the element is removed from the document.
+    disconnectedCallback() {
+      // console.log("p2p-frame disconnected")
+      this.unsubscribeSignalChannel()
+    }
+
+    subscriptionConnected() {
+      // console.log("subscriptionConnected")
+      this.peer.setup()
+    }
+  
+    subscriptionDisconnected() {
+      // console.log("subscriptionDisconnected")
+    }
+
+    receiveSignal(message) {
+      // console.log("receive signal")
+      // console.log(message)
+      if (message.type == MessageType.Connection) {
+        this.peer.negotiate(message)
+      }
+    }
+
+    setP2pListener(listener) {
+      this.listeners ||= []
+      this.listeners.push(listener)
+    }
+
+    dispatchP2pMessage(message) {
+      this.listeners.forEach(listener => {
+        listener.p2pReceivedMessage(message)
+      })
+    }
+
+    sendP2pMessage(msg) {
+      this.peer.sendP2pMessage(msg)
+    }
+
+    p2pNegotiating() {
+      this.listeners.forEach(listener => {
+        listener.p2pNegotiating()
+      })
+    }
+
+    p2pConnecting() {
+      this.listeners.forEach(listener => {
+        listener.p2pConnecting()
+      })
+    }
+
+    p2pConnected() {
+      this.listeners.forEach(listener => {
+        listener.p2pConnected()
+      })
+      
+      // only host-peer retain connect to the signal server
+      if (!this.peer?.iamHost && !this.keepCableConnection) {
+        // console.log("im not host so unsubscribe")
+        this.unsubscribeSignalChannel()
+      }
+    }
+
+    p2pDisconnected() {
+      this.listeners.forEach(listener => {
+        listener.p2pDisconnected()
+      })
+    }
+
+    p2pClosed() {
+      this.listeners.forEach(listener => {
+        listener.p2pClosed()
+      })
+    }
+
+    p2pError() {
+      this.listeners.forEach(listener => {
+        listener.p2pError()
+      })
+    }
+
+    async unsubscribeSignalChannel() { // TODO: MAKE SURE `SignalingChannel stopped streaming`
+      if (this.subscription) this.subscription.unsubscribe()
+      Turbo.disconnectStreamSource(this)
+      let consumer = await cable.getConsumer()
+      if (consumer) consumer.disconnect()
+    }
+
+    get sessionId() {
+      return this.getAttribute("session-id")
+    }
+
+    get peerId() {
+      return this.getAttribute("peer-id")
+    }
+
+    get params() {
+      return JSON.parse(this.getAttribute("params"))
+    }
+
+    get config() {
+      return this.params["config"] || {}
+    }
+
+    get iceConfig() {
+      return {
+        iceServers: this.config["ice_servers"]
+      }
+    }
+
+    get heartbeatConfig() {
+      return this.config["heartbeat"]
+    }
+
+    get keepCableConnection() {
+      return this.config["keep_cable_connection"]
+    }
+
+    get channel() {
+      const channel = this.getAttribute("channel")
+      const signed_stream_name = this.getAttribute("signed-stream-name")
+      return {
+        channel: channel,
+        signed_stream_name: signed_stream_name,
+        session_id: this.sessionId,
+        peer_id: this.peerId,
+      }
+    }
+}
+
+customElements.define("p2p-frame", P2pFrameElement)