Broadcast Channel API

Ken · Post by **Ken** » Tue Feb 10, 2026 7:29 pm

This is a simple example how to use Broadcast Channel API in Spiderbasic with browser tabs.
To test open the app also in another browser tab and send test messages.

Code: Select all

EnableExplicit

Enumeration
  #SendButton
  #InputField
  #MessageList
EndEnumeration

Global MessageLog.s = ""

; ============================================
; SETUP BROADCAST CHANNEL
; ============================================

Procedure SetupBroadcastChannel()
  ! window.channel = new BroadcastChannel('spiderbasic_channel');
  ! 
  ! window.channel.onmessage = function(event) {
  !   console.log('Received:', event.data);
  !   var list = document.getElementById('messages');
  !   var item = document.createElement('div');
  !   item.style.padding = '8px';
  !   item.style.marginBottom = '5px';
  !   item.style.background = '#e8f4fc';
  !   item.style.borderRadius = '4px';
  !   item.innerHTML = '<strong>Received:</strong> ' + event.data;
  !   list.appendChild(item);
  !   list.scrollTop = list.scrollHeight;
  ! };
EndProcedure

; ============================================
; SEND MESSAGE
; ============================================

Procedure SendMessage()
  Define msg.s
  msg = GetGadgetText(#InputField)
  If msg <> ""
    ! window.channel.postMessage(v_msg);
    ! console.log('Sent:', v_msg);
    ! var list = document.getElementById('messages');
    ! var item = document.createElement('div');
    ! item.style.padding = '8px';
    ! item.style.marginBottom = '5px';
    ! item.style.background = '#d4edda';
    ! item.style.borderRadius = '4px';
    ! item.innerHTML = '<strong>Sent:</strong> ' + v_msg;
    ! list.appendChild(item);
    ! list.scrollTop = list.scrollHeight;
    SetGadgetText(#InputField, "")
  EndIf
EndProcedure

; ============================================
; MAIN
; ============================================

Define Html.s

SetupBroadcastChannel()

If OpenWindow(0, 50, 50, 500, 400, "Broadcast Channel Demo", #PB_Window_SystemMenu)
  
  ; Input field
  StringGadget(#InputField, 10, 35, 350, 30, "")
  
  ; Send button
  ButtonGadget(#SendButton, 370, 35, 120, 30, "Send Message")
  BindGadgetEvent(#SendButton, @SendMessage(), #PB_EventType_LeftClick)
  
  ; Message display area
  Html = "<div id=" + Chr(34) + "messages" + Chr(34) + " style=" + Chr(34) + "padding:10px;height:280px;overflow-y:auto;background:#f5f5f5;border-radius:8px;" + Chr(34) + "><p style=" + Chr(34) + "color:#888;" + Chr(34) + ">Open this app in another browser tab and send messages!</p></div>"
  TextGadget(#MessageList, 10, 80, 480, 310, Html)
  
EndIf

// Moved from "Coding Questions" to "Tricks 'n' Tips" (Peter)