### WebApp Message to Clients

To send a message to all connected clients of a B4J Server application (non-UI) using Websockets.
The message is displayed in a HTML
tag with id="usermessage" as subheader in index.html in the www folder.
The example uses the w3.css framework http://www.w3schools.com/w3css/ .
HTML www/index.html
<!DOCTYPE html>
<html>
<head>
<title>B4J HowTo - WebMessage</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="/b4j_ws.js"></script>
</head>
<body>
<header class="w3-container w3-theme"><h3>B4J HowTo - WebMessage</h3></header>
<div class="w3-container">
<div class="w3-text-red" id="usermessage">User Message</div>
<button class="w3-btn w3-round-large w3-theme w3-right" id="btnmessage" title="Send message to all connected clients" onclick="document.getElementById('dlgmessage').style.display='block'"><i class="fa fa-commenting-o w3-xxlarge"></i></button>
</div>
<!-- MODAL DIALOG MESSAGE BEGIN -->
<div id="dlgmessage" class="w3-modal">
<div class="w3-modal-content w3-card-8">
<div class="w3-container">
<span onclick="document.getElementById('dlgmessage').style.display='none'" class="w3-closebtn">×</span>
<header class="w3-container w3-theme"><h4>Send Message</h4></header>
<div class="w3-input-group">
<label class="w3-label w3-text-teal"><b>Message Text:</b></label>
<input class="w3-input w3-border w3-light-grey" type="text" id="inputdlgmessage">
</div>
<p>
<input class="w3-check" type="checkbox" checked="checked" id="timeoptiondlgmessage">
<label class="w3-validate">Include Time</label></p>
<p>
<button class="w3-btn-block w3-green w3-section w3-padding" onclick="document.getElementById('dlgmessage').style.display='none'" id="btndlgmessagesend">Send</button>
</div>
</div>
</div>
<!-- MODAL DIALOG MESSAGE END -->
<!-- Script Area -->
<script>
$( document ).ready(function() {
b4j_connect("/ws");
});
</script>
</body>
</html>
B4J Main Class
`Sub Process_Globals
Public srvr As Server
Public ConnectedBrowsers As Map
End Sub`
`Sub AppStart (Args() As String)
srvr.Initialize("srvr")
srvr.AddWebSocket("/ws", "webmessage")
srvr.Port = 51042
srvr.Start
ConnectedBrowsers = srvr.CreateThreadSafeMap
StartMessageLoop
End Sub`
B4J WebMessage Class
`Sub Class_Globals
Private ws As WebSocket 'ignore
Private RemoteIP As String
Private usermessage As JQueryElement
Private inputdlgmessage As JQueryElement
Private timeoptiondlgmessage As JQueryElement
End Sub`
`Public Sub Initialize
' DO NOT REMOVE
End Sub`
`Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
ws = WebSocket1
Main.ConnectedBrowsers.Put(Me, "")
usermessage.SetHtml("Press the icon to send your message to all connected clients.")
RemoteIP = WebSocket1.UpgradeRequest.RemoteAddress
Log($"New Connection with IP ${RemoteIP}"$)
End Sub`
`Private Sub WebSocket_Disconnected
Main.ConnectedBrowsers.Remove(Me)
End Sub`
`Private Sub btndlgmessagesend_Click(params As Map)
Dim msg As String
' Check if the include time option is selected. This is done by reading the property.
Dim btime As Boolean = timeoptiondlgmessage.GetProp("checked").Value
If btime Then
DateTime.TimeFormat = "HH:mm"
msg = $"${DateTime.Time(DateTime.Now)} "$
End If
msg = $"${msg}${inputdlgmessage.GetVal.Value}"$
' Send it
For Each wm As webmessage In Main.ConnectedBrowsers.Keys
CallSubDelayed2(wm, "setusermessage", msg)
Next
End Sub`
`Public Sub SetUserMessage(msg As String)
usermessage.SetHtml(msg)
ws.flush
Log($"${DateTime.Time(DateTime.Now)}: New message send from IP address ${RemoteIP}"$)
End Sub`

Changed: , Category: WebApps, File: T6C277M2080.htm, ID: 2080