Welcome to www.achex.ca Your IP is: 3.145.77.236
Achex Server
Achex Server Quickstart Develop Feedback Games Chat About

Achex WSS - Quickstart Develop

General WebSocket Workflow in javascript

new WebSocket('domain:port'); In the 'script' section of the html page make a new WebSocket Object specifying the domain and port.
The newly created object has the following events that MUST be assigned a handler otherwise the connection will not open: events: onmessage, onopen, onclose, onerror
onmessage event triggers the handler whenever a new message was received

example: ws.onmessage = function(evt){/*do something*/};
OR
example: function my_message_hangler(evt){/*do something*/}
                      ws.onmessage = my_message_hangler;
onopen event triggers the handler whenever the connection is established

example: ws.onopen = function(e){/*do something*/};
onclose event triggers the handler when there the websocket disconnects

example: ws.onclose = function(e){/*do something*/};
diconnect can be initiated by either client or server
onerror (optional) event triggers handler when an error occurs in the protocol or connection

example: ws.onerror = function(e){/*do something*/};
To interact, use the following methods: send(), close()
send(message) Use to send messages

example: my_ws_object.send('some string');
OR
example: my_ws_object.send(string_object);
close() Close the connection.

example: my_ws_object.close();


General Workflow Using Achex WebSocketServer

1. Connect After creating the WebSocket object in javascript (see above) and setting all the handlers, the connection will be established automatically.
2. Get SessionID Handle receving a JSON string object containing parameter SID (i.e. {"SID":number}). This "SID" parameter is your serssion ID and it is a unique identifier of this current connection to the server.
3. Send Authentification request Authenticate by sending: {"setID":"myusername","passwd":"mypass"}
4. Handle Authentification reply Handle receiving a JSON string object containing parameter auth (i.e. {"auth":"ok"}).
This means that your sessionID now has the name identifier you set above ("myusername"). If this message is not received, you will not be able to send any message exept ping
Troubleshoot: check if username or password not valid - might be a restricted username
check if sent message has correct JSON syntax
5. Communicate
Packets are JSON based strings. They should contain ONLY ONE of the following variables:
"to":"[destination username]" send to all sessions that have "dest_username" as name identifier (name or ID)
not to be confused with sessionID!!!

"toS":"[sessionID number]" send to this specific sessionID
sessionID has to be a number or the message will get dropped
The received messages will contain one or both parameters "to" username destination set by the sender
overwrites "toS"
"toS" sessionID destination set by the sender
ignore if parameter "to" is present
The received messages will ALWAYS contain parameters: "FROM" authentified username of sender
"sID"sessionID of sender
Recommended parameter value for use in reply
i.e. for reply use "toS":"sessionID of sender" will only deliver msg to the session that sent

A simple hello world example

Go on the example page "example.html" and look at the source code of the page.
OR
Right Click link and 'save as' to get the source code of the example page.
OR
Copy the content of "example.html" below into a text file and name the file "example.html" or anyother name (extension has to be .html). Open your file with a browser to "run" the code, and with a text editor (notepad for example) to edit. After each edit, you must refresh the page in the browser so that changes/edits take effect.
Messaging using example.html
Receiving Messages
Whenever a message is received, an event will trigger the function set by
ws.onmessage = function(evt){ dosomething(); };.
Where 'evt' will be the received OBJECT containing the actual message and other flags. To get the string/data received, access the data propery like this: var mystr = evt.data;
Server Autentification
In the send input box, write {"setID":"myusername","passwd":"none"}
(replace mysername by your desired username)
Press send.
Sending Messages
In the send input box, write {"to":"myfriend's-username","myparameter":"myvalue"}
(replace mysername by your desired username)
Press send.
Ping
In the input box, write ping
Press send.
Next, you will receive a string {"ltcy":number} which is the roundtrip time from your page to the server and back.



Content of "example.html" : 
<html>
	<!-- Achex WebSocketServer Banner -->
	<a href="http://www.achex.ca/" 
		style="background:#555;
		color:#ddd;border-radius:3px;padding:0px 10px 0px 10px;
		text-decoration:none;
		font-family:Arial;letter-spacing:1px;font-size:12px;">
		Powered by Achex WebSocketServer
	</a><br><br>
	<!-- Achex WebSocketServer Banner -->

	Achex WebSocketServer <br>- javascript interface example -<br>
	<hr>

	<!-- User Input -->
	<input id="userinput" type="text" value="ping">
	<a href="javascript:send()">SEND</a>

	<!-- Log display -->
	<div id="mylog">Received:<br></div>

	<!-- WEBSOCKET SIMPLE SCRIPT -->
	<script type="text/javascript">

	// --- LOG ---
	//***************************
	// get log object from html 
	var logdiv = document.getElementById('mylog');

	// make a simplified log function
	function logf(str){
		logdiv.innerHTML += str + '<br>';
	}
	//***************************

	// --- WEBSOCKET ---
	//***************************
	// make new conncetion
	var ws = new WebSocket('ws://achex.ca:4010');

	// add event handler for incomming message
	ws.onmessage = function(evt){
		var my_received_message = evt.data;
		logf('received: ' + my_received_message);
	};

	// add event handler for diconnection 
	ws.onclose= function(evt){
		logf('log: Diconnected');
	};

	// add event handler for error 
	ws.onerror= function(evt){
		logf('log: Error');
	};

	// add event handler for new connection 
	ws.onopen= function(evt){
		logf('log: Connected');
	};

	// make a simple send function
	function send(){
		var input = document.getElementById('userinput');
		// send content of input field into websocket
		ws.send(input.value);
		// erase input field
		input.value = '';
	}
	//***************************
	
	</script>
</html>


More Examples comming soon...


Copyright © 2013 Alexandru Costea. All rights reserved.