Imagine an application that will need to notify users when something has change on the server, for example a user connection in a chat system, or a new task added in a share task list system.<\/p>\n
Before WebSockets, the only way to create a notification mechanism on a web site, was to make an ajax request every two or three seconds, or to create long polling<\/a> requests.<\/p>\n Now we can on each client, create a connection, this mean the server will maintain connexion with the client.<\/p>\n Connections are always initiated (the first call) by the client.<\/p>\n As you can imagine old browsers will not allow you to use this feature, but all modern browsers are compatible, you can check your browser by visiting the CanIUse Web Site<\/a>.<\/p>\n And in your application you can test the presence of the WebSocket Api :<\/p>\n This is quite simple … nothing to explain here.<\/p>\n The WebSocket feature has to be present on the browser, but it must be accepted by the server too.<\/p>\n There is many server implementations in different languages, here is a non exhaustive list :<\/p>\n In our example we will use a PHP implementation.<\/p>\n So know let see how the API works. (Remember to check if the WebSocket is supported by the browser).<\/p>\n The simplest way to create a connection is :<\/p>\n The Constructor parameters are : The url scheme : The The WebSocket object has three attributes :<\/p>\n The two As we now know how the Imagine an application that allow you to create an online Todo List, but many user might add some tasks to the list, and you want everyone to be notified that someone added a task.<\/p>\n So we will create a basic list with a small form to add some tasks. As i already made an article with a todo list example (see it HTML5 offline web application example<\/a>) so i will reuse some JavaScript Code.<\/p>\n As I told you, I’ve already created a Todo List, but only a Single Page Application, with no interactions, here is the base code:<\/p>\n This is a simple web page, with a form ( The code is fully documented so I think there’s no needs to describe it.<\/p>\n This will create a web page like that :<\/p>\n As we need to communicate with a server in order to make some actions, we will need to create a simple message mechanism.<\/p>\n The actions we need are :<\/p>\n So i’ve created a message like that :<\/p>\n So let start a server static object, at the end of the javascript file (just after the line with The values of the So now we can start to communicate with the server.<\/p>\n As i said earlier I created a server Application using a PHP implementation based on Ratchet<\/a>.<\/p>\n The source application is in the Download bundle, to run the server application go in the server directory then retrieve the dependencies, and run the application.<\/p>\n1.1 Compatibility<\/h3>\n
\r\nif( window.WebSocket ){\r\n\/\/ supported\r\n}else{\r\n\/\/ not supported\r\n}\r\n<\/pre>\n1.2 Server Implementation<\/h3>\n
Node.js<\/h4>\n
\n
Java<\/h4>\n
\n
Ruby<\/h4>\n
\n
Python<\/h4>\n
\n
PHP<\/h4>\n
\n
2. The API<\/h2>\n
2.1 Create the connection<\/h3>\n
\r\nvar socket = new WebSockect('ws:\/\/localhost:8080');\r\n<\/pre>\nurl<\/code>, and optionally you can add one or more protocols<\/code>.<\/p>\nws:\/\/<\/code> (and wss:\/\/<\/code> for secure connections) was introduced with the WebSocket Api, this scheme tell the browser to negotiate a WebSocket connection.<\/p>\nprotocol<\/code> parameter can be, ommited, or a single string or an array of protocol strings. This will indicate sub-protocols implemented by a server, so that a single server can implement multiple WebSocket sub-protocols (for example, you might want one server to be able to handle different types of interactions depending on the specified protocol). If you don’t specify a protocol string, an empty string is assumed.<\/p>\n2.2 Attributes <\/h3>\n
\n
url<\/code>, the url passed to the constructor, it’s a readonly<\/em> attribute.<\/li>\nreadyState<\/code>, this attribute contains a numerical value that represents the state of the connection.
\n It’s a readonly<\/em> attribute. It can have the following values :<\/p>\n\n
CONNECTING<\/code>, (numeric value 0)<\/em> The connection has not yet been established.<\/li>\nOPEN<\/code>, (numeric value 1)<\/em> The WebSocket connection is established and communication
\n is possible.\n <\/li>\nCLOSING<\/code>, (numeric value 2)<\/em> The connection is going through the closing handshake.\n <\/li>\nCLOSED<\/code>, (numeric value 3)<\/em> The connection has been closed or could not be opened.\n <\/li>\n<\/ul>\n<\/li>\nprotocol<\/code>, initially an empty string. After connection established, the value might change, it’s a
\n readonly<\/em> attribute.\n <\/li>\n<\/ul>\n2.3 Methods<\/h3>\n
WebSocket<\/code> has two methods :<\/p>\n\n
send(DOMString data)<\/code>, This method will send its data<\/code> parameter to the server, the data
\n must be a string.\n <\/li>\nclose()<\/code>, calling this method will end the connection.<\/li>\n<\/ul>\n\r\nvar socket = new WebSockect('ws:\/\/localhost:8080');\r\nsocket.send("Somme Message to send to the server");\r\nsocket.close();\r\n<\/pre>\n2.4 Events<\/h3>\n
WebSocket<\/code> introduced some events to interact with behaviour, like receiving some data from the server.<\/p>\n\n
open<\/code>, or as a function :onopen<\/code>, is fired (or called) when the connection is
\n established.\n <\/li>\nmessage<\/code>, or as a function :onmessage<\/code>, is fired (or called) when a message is
\n received..\n <\/li>\nerror<\/code>, or as a function :onerror<\/code>, is fired (or called) when an error occured.<\/li>\nclose<\/code>, or as a function :onclose<\/code>, is fired (or called) when the connection is close.\n <\/li>\n<\/ul>\n\r\nvar socket = new WebSockect('ws:\/\/localhost:8080');\r\nsocket.addEventListener('open', function(){\r\n console.log("Connection established, handle with event");\r\n});\r\nsocket.onopen = function(){\r\n console.log("Connection established, handle with function");\r\n};\r\nsocket.close();\r\n<\/pre>\nopen<\/code> handler have the same behaviour. Personally I prefer using the addEventListener<\/code> way.<\/p>\n3. The Real World Example<\/h2>\n
WebSocket<\/code> object is used we can create a “real world”<\/em> example. In this example we will create a shared “Todo List”<\/em>.<\/p>\n3.1 The base application<\/h3>\n
The HTML Code :<\/h4>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title>Task List Example<\/title>\r\n <link href="css\/style.css" rel="stylesheet"\/>\r\n<\/head>\r\n<body>\r\n<div id="wrapper">\r\n <form id="taskform">\r\n <input type="hidden" id="task_id" value="-1"\/>\r\n <input type="text" id="task" placeholder="Add a Task ..."\/>\r\n <input type="submit" value="Add"\/>\r\n <\/form>\r\n <ul id="tasklist"><\/ul>\r\n <button id="reset">Clear All Tasks<\/button>\r\n<\/div>\r\n<script src="js\/zepto.min.js"><\/script>\r\n<script src="js\/script.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
#taskform<\/code>), that contains a text field to add the task description, and a submit button. The page also contains an area for the tasks (#tasklist<\/code>). The reset button is here to empty the task list.<\/p>\nThe JavaScript Code :<\/h4>\n
\r\n\/**\r\n* @author R\u00e9mi Goyard\r\n*\/\r\n$(function () {\r\n\r\n \/**\r\n *\r\n * The Tasks Object\r\n *\/\r\n var tasks = {\r\n \/**\r\n * Reset the form inputs\r\n *\/\r\n resetForm: function () {\r\n $('#task').val('');\r\n $('#task_id').val(-1);\r\n },\r\n\r\n \/**\r\n * create the element in the task list from the task object\r\n *\r\n * @param task { id : (int) the task id, task : (string) the task description}\r\n *\/\r\n createTask: function (task) {\r\n var $li = tasks.createElemnt(task);\r\n $('#tasklist').append($li);\r\n tasks.resetForm();\r\n },\r\n\r\n \/**\r\n * remove a task from it's id\r\n *\r\n * @param id\r\n *\/\r\n remove: function (id) {\r\n var taskId = $('#task_id').val();\r\n if (taskId === id) {\r\n tasks.resetForm();\r\n }\r\n $('#' + id).remove();\r\n },\r\n\r\n \/**\r\n * Edit a task, fill the form inputs from the Dom Element\r\n * @param spanEl\r\n *\/\r\n edit: function (spanEl) {\r\n var $li = $(spanEl).parent();\r\n var taskId = $(spanEl).parent().attr('id');\r\n var $taskElement = $('#task');\r\n $taskElement.val($(spanEl).text()).focus();\r\n $('#task_id').val(taskId);\r\n $li.addClass("edited");\r\n },\r\n\r\n \/**\r\n * Replace a task by another (used in edit)\r\n * @param task\r\n *\/\r\n replace: function (task) {\r\n var $li = tasks.createElemnt(task);\r\n $('#' + task.id).replaceWith($li);\r\n tasks.resetForm();\r\n },\r\n\r\n \/**\r\n * Reset the list (empty the list container)\r\n *\/\r\n reset:function(){\r\n $("#tasklist").html('');\r\n },\r\n\r\n \/**\r\n * Create the li element to add or replace in the Task List\r\n * @param task\r\n * @returns {*|jQuery|HTMLElement}\r\n *\/\r\n createElemnt:function(task){\r\n return $('<li id="' + task.id + '"><div>' + task.task + '<\/div><span><a href="#" class="delete">delete<\/a><\/span><\/li>');\r\n }\r\n };\r\n\r\n\r\n \/**\r\n * Generate a unique String based on timestamp\r\n * @returns {string}\r\n *\/\r\n function createUniqId() {\r\n return '_' + (new Date().getTime()).toString(16);\r\n }\r\n\r\n \/**\r\n * The init function, that will load form events.\r\n * And manage interaction between user interface and server.\r\n *\r\n * @param taskList The array of tasks\r\n *\/\r\n function init(taskList) {\r\n\r\n \/**\r\n Manage the Form Submission\r\n For Adding or editing task\r\n *\/\r\n $("#taskform").submit(function (e) {\r\n e.preventDefault();\r\n var task = $('#task').val();\r\n var taskId = $('#task_id').val();\r\n var taskObj = {id: taskId, task: task};\r\n if (taskObj.id == -1) {\r\n \/\/ This is a new task submited\r\n taskObj.id = createUniqId();\r\n tasks.createTask(taskObj);\r\n } else {\r\n \/\/ this is an existing task\r\n tasks.replace(taskObj);\r\n }\r\n });\r\n\r\n \/**\r\n * Click On the Reset Button\r\n *\/\r\n $('#reset').click(function () {\r\n tasks.reset();\r\n });\r\n\r\n\r\n var $taskList =$("#tasklist");\r\n\r\n \/**\r\n * Click on a delete Link to delete list item\r\n *\/\r\n $taskList.on('click', 'a.delete', function(e){\r\n e.stopPropagation();\r\n var id = $(this).parents('li').attr('id');\r\n tasks.remove(id);;\r\n });\r\n\r\n \/**\r\n * DblClick on a Task Link to edit the list item\r\n *\/\r\n $taskList.on('dblclick', 'li > div', function() {\r\n tasks.edit(this);\r\n });\r\n\r\n\r\n \/**\r\n * Initialise the list with the initial (from parameter) tasklist array\r\n *\/\r\n for (var i = 0; i < taskList.length; i++) {\r\n tasks.createTask(taskList[i]);\r\n }\r\n }\r\n\r\n\r\n \/**\r\n Run the Application with empty Task list\r\n *\/\r\n init([]);\r\n})();\r\n<\/pre>\n![\"HTML5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/online.png\")
<\/a>3.2 The Message mechanism<\/h3>\n
\n
LIST<\/code>, this action will be send by the server to the client just after the client connection.<\/li>\nADD<\/code>, this action will be first send by the client to server, just after adding a new task,
\n the server persists the task and then send the action to all other clients.<\/li>\nDELETE<\/code>, this action will be first send by the client to server, just after deleting a task,
\n the server persists the task and then send the action to all other clients.<\/li>\nEDIT<\/code>, this action will be first send by the client to server, just after updating a task,
\n the server persists the task and then send the action to all other clients.<\/li>\nCLEAR<\/code>, this action will be first send by the client to server, just after clicking on the Reset button<\/em>,
\n the server reset the tasks datas, and then send the action to all other clients.<\/li>\n<\/ul>\n\r\nvar message = {\r\n action:'ACTION_CONSTANT',\r\n data:{} \/\/ the data to send\r\n};\r\n<\/pre>\ninit([]);<\/code>) create the following code :<\/p>\n\r\nvar server = {\r\n ACTION: {\r\n LIST: 0,\r\n ADD: 1,\r\n DELETE: 2,\r\n EDIT: 3,\r\n CLEAR:4\r\n },\r\n createMessage: function(action, message){\r\n return {action:action, data:message};\r\n }\r\n};\r\n<\/pre>\nserver.ACTION<\/code> constants are shared with the server.<\/p>\n3.3 Server<\/h3>\n
Run the server<\/h4>\n
\r\ncd DOWNLOADED_BUNDLE\/server\r\ncomposer install\r\nphp index.php\r\n<\/pre>\n