CrossBrowdy - Examples

Networking

WebSockets

This is an example managing WebSockets (internally, it uses the SockJS client library):

index.html:

<!DOCTYPE html>
<html>
	<head>
		<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="canonical" href="https://crossbrowdy.com/examples/networking/websockets/try" />
		<title>Networking: WebSockets - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
		<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
		<!-- Loads the other needed script files: -->
		<script src="main.js" type="text/javascript" language="javascript"></script>
	</head>
	<body>
		Penultimate event: <span id="penultimate_event"></span><br />
		Last event: <span id="last_event"></span><br />
		Server: <input type="text" id="server" size="60" value="http://WebSockets_server_URL:port/example" /> <button onClick="start();">Start connection</button><br />
		<br />
		<button onClick="stop();">Close connection</button><br />
		<br />
		<input type="text" id="message" size="60" value="Hello, SockJS server!" /> <button onClick="send();">Send</button>
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/networking/websockets" target="_blank">CrossBrowdy.com example</a></div>
	</body>
</html>

main.css:

/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; cursor:hand; }

main.js:

/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

CB_init(main); //It will call the "main" function when ready.


//This function will be called when CrossBrowdy is ready:
function main()
{
	CB_console("Ready!");
}


//Starts a WebSockets connection:
var websocket = null;
function start()
{
	//Tries to starts a connection to the WebSockets (SockJS) server:
	showEventsInformation("Trying to open the connection...");
	websocket = CB_Net.Sockets.SockJS.listen
	(
		//Defines the server address:
		CB_Elements.id("server").value,

		//Defines the handler for the "onOpen" event (optional):
		function webSocketsOnOpen(evt)
		{
			showEventsInformation("The 'onOpen' event was fired! websocket.transport=" + websocket.transport);
		},

		//Defines the handler for the "onClose" event (optional):
		function webSocketsOnClose(evt)
		{
			showEventsInformation("The 'onClose' event was fired! Reason: " + evt.reason);
			websocket = null;
		},

		//Defines the handler for the "onMessage" event (optional):
		function webSocketsOnMessage(evt)
		{
			showEventsInformation("The 'onMessage' event was fired! Data received: " + evt.data);
		},

		//Defines the handler for the "onError" event (optional):
		function webSocketsOnError(evt)
		{
			showEventsInformation("The 'onError' event was fired! evt = " + JSON.stringify(evt));
		},

		//Other parameters (internal usage recommended):
		undefined, //options
		undefined //protocols
	);
}


//Sends a message through the WebSockets connection:
function send()
{
	//Tries to send a message to the server (if 'websocket' is not provided, it will use the last one created (stored in 'CB_Net.Sockets.SockJS.websocketLast'):
	showEventsInformation("Trying to send the message...");
	CB_Net.Sockets.SockJS.send
	(
		//Message to send:
		CB_Elements.id("message").value,

		//WebSockets object to use (optional):
		websocket, //If not provided, it will use the last one created (stored in 'CB_Net.Sockets.SockJS.websocketLast').

		//Defines a handler for the "onError" event (optional):
		function(evt) { showEventsInformation("Failed to send the message! evt = " + JSON.stringify(evt)); } //Prints the event object.
	);	
}


//Stops the WebSockets connection:
function stop()
{
	//Tries to close the connection:
	showEventsInformation("Trying to close the connection...");
	CB_Net.Sockets.SockJS.close
	(
		//WebSockets object to use (optional):
		websocket, //If not provided, it will use the last one created (stored in 'CB_Net.Sockets.SockJS.websocketLast').

		//Defines a handler for the "onError" event (optional):
		function(evt) { showEventsInformation("Failed to close the connection! evt = " + JSON.stringify(evt)); } //Prints the event object.
	);
}


//Shows events information:
function showEventsInformation(message)
{
	//Updates events information:
	CB_Elements.insertContentById("penultimate_event", CB_Elements.id("last_event").innerHTML);
	CB_Elements.insertContentById("last_event", message);
	CB_console(message);
}
For testing this example, you can easily get an open-source and free SockJS server here: SockJS test server on NW.js.

Try this example

You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.

All the examples together can be downloaded here.

Go back to Guides & Tutorials

Try this example












Share