ConnectionEvent extendsRemoteEvent

A class that extends Event | Event.

Try it

<m-label y="5" width="10" height="5" color="red" font-size="150">
</m-label>

<script>
  const connections = new Set();

  window.addEventListener("connected", (e) => {
    const labelElement = document.querySelector("m-label")
    connections.add(e.detail.connectionId)

    const connectionsString = Array.from(connections).join(", ")

    labelElement.setAttribute("content", "Connected Ids: " + connectionsString)
  })
</script>

Properties

detailisReadonlyisInherited

{ connectionId: number connectionToken: undefined }

typeisReadonly

The **

type

** read-only property of the Event interface returns a string containing the event's type.

MDN Reference

Union

Literal: disconnected
Literal: connected

Examples

Basic disconnection event

<m-label y="5" width="10" height="5" color="red" font-size="150">
</m-label>

<script>
  const labelElement = document.querySelector("m-label")
  const connections = new Set([1, 2]);
  const connectionsString = Array.from(connections).join(", ")
  labelElement.setAttribute("content", "Connected Ids: " + connectionsString)

  window.addEventListener("disconnected", (e) => {
    connections.delete(e.detail.connectionId)

    const connectionsString = Array.from(connections).join(", ")

    labelElement.setAttribute("content", "Connected Ids: " + connectionsString)
  })
</script>

Visible to event

<m-group id="label-group"></m-group>

<script>
  const labelGroup = document.querySelector("#label-group")

  window.addEventListener("connected", (e) => {
    const newLabel = document.createElement("m-label")

    newLabel.setAttribute("id", `#client-${e.detail.connectionId}`)
    newLabel.setAttribute("y", "5")
    newLabel.setAttribute("width", "10")
    newLabel.setAttribute("height", "4")
    newLabel.setAttribute("color", "red")
    newLabel.setAttribute("font-size", "300")
    newLabel.setAttribute("alignment", "center")
    newLabel.setAttribute("visible-to", e.detail.connectionId)
    newLabel.setAttribute("content", e.detail.connectionId)

    labelGroup.appendChild(newLabel)
  })

  window.addEventListener("disconnected", (e) => {
    const label = document.querySelector(`#client-${e.detail.connectionId}`)

    labelGroup.removeChild(label)
  })
</script>