1. WebSockets -- full-duplex communication

The main HTML5 pillars include Markup, CSS3, and JavaScript APIs

For whole set of HTML5, visit html5rocks.com (google product)

 

The URL

The following image shows the WebSocket URL example in tokens:

schema      host              port     server

   ws://example.com:/chat.php

wss is supported as well and is the WebSocket equivalent to https for secure connections (SSL).

Who's using WebSockets

Name            Website                                            Description

Gamooga       http://www.gamooga.com/                  Real-time backend for apps and games

GitLive           http://gitlive.com/                               Notifications on GitHub projects

Superfeedr     http://superfeedr.com/                       Real-time data pushing

Pusher           http://pusher.com/                             Scalable real-time functionality API for web and mobile apps

Smarkets       https://smarkets.com/                        Real-time betting

IRC Cloud      https://www.irccloud.com/                   Chatting

Two great resources containing a large variety of WebSocket demos are as follows:

• http://www.websocket.org/demos.html

• http://www.html5rocks.com/en/features/connectivity

2. The WebSocket API web client

WebSocket communication and data transmission is bidirectional, so we need two parties to establish it: a server and a client.

HTML5 basics:

  • Markup HTML (.html)

For more information about the HTML5 markup, consider visiting http://html5doctor.com/. There is a complete reference for the supported HTML5 tags at http://html5doctor.com/element-index/.

  • Styling CSS (.css)

http://www.css3.info/ is a great resource for CSS3 and further reading.

  • Logic JavaScript (.js)

The markup defines the structure and the CSS rules apply the styling. What about event handling and user actions? Well, here comes JavaScript! The WebSocket API is pure JavaScript, too!

WebSocket API allows you to connect to a local or remote server, listen for messages, send data, and close the connection. Typical WebSocket workflow shows below:

JavaScript provides an easy way to find out whether a browser can execute WebSocket-specific code:

if (window.WebSocket) {   // validation check

　　console.log("WebSockets supported.");                                               

　　// Continue with the rest of the WebSockets-specific functionality…

}

else {

　　console.log("WebSockets not supported.");

　　alert("Consider updating your browser for a richer experience.");

}

Want to see which browsers do support the WebSocket protocol? There is an up-to-date resource available at http://caniuse.com/#feat=websockets.

  • The WebSocket object ：var socket = new WebSocket("ws://echo.websocket.org");
  • Events: Open, Message, Close, and Error.

You can handle them either by implementing the onopen, onmessage, onclose, and onerror functions respectively, or by using the addEventListener method.

  • Actions: The WebSocket protocol supports two main actions: send() and close().
  • Properties:

Properties               Description

url                            Returns the URL of the WebSocket  protocol Returns the protocol used by the server

readyState                Reports the state of the connection and can take one of the following selfexplanatory values:

　　　　　　　　　　　　　　WebSocket.OPEN

　　　　　　　　　　　　　　WebSocket.CLOSED

　　　　　　　　　　　　　　WebSocket.CONNECTING

　　　　　　　　　　　　　　WebSocket.CLOSING

bufferedAmount     Returns the total number of bytes that were queued when the send() method was called

binaryType             Returns the binary data format we

received                  when the onmessage event was raised

 The complete client example:

index.html:

<!DOCTYPE html>

<html>

<head>

<title>HTML5 WebSockets</title>

<link rel="stylesheet" href="style.css" />

<script src="chat.js"></script>

</head>

<body>

<h1> HTML5 WebSocket chat. </h1>

<input type="text" id="text-view" />

<input type="button" id="send-button" value="Send!" />

<input type="button" id="stop-button" value="Stop" />

</br>

<label id="status-label">Status</label>

</body>

</html>

Chat.js:

 window.onload = function() {

 var textView = document.getElementById("text-view");

 var buttonSend = document.getElementById("send-button");

 var buttonStop = document.getElementById("stop-button");

 var label = document.getElementById("status-label");

 var socket = new WebSocket("ws://echo.websocket.org");

 socket.onopen = function(event) {

 label.innerHTML = "Connection open";

 }

 socket.onmessage = function(event) {

 if (typeof event.data === "string") {

 label.innerHTML = label.innerHTML + "<br />" + event.data;

 }

 }

 socket.onclose = function(event) {

 var code = event.code;

 var reason = event.reason;

 var wasClean = event.wasClean;

 if (wasClean) {

 label.innerHTML = "Connection closed normally.";

 }

 else {

 label.innerHTML = "Connection closed with message: " +

 reason + " (Code: " + code + ")";

 }

 }

 socket.onerror = function(event) {

 label.innerHTML = "Error: " + event;

 }

 buttonSend.onclick = function() {

 if (socket.readyState == WebSocket.OPEN) {

 socket.send(textView.value);

 }

 }

 buttonStop.onclick = function() {

 if (socket.readyState == WebSocket.OPEN) {

 socket.close();

 }

 }

 }

Server side:

Server                                                                  Client
Create a server on localhost:8181  
Start running
Initial handshake: establish connection  <----------- Request connection
Handle the incoming message  --------------------> Send message

refer to book (p. 31):http://www.amazon.com/Getting-Started-HTML5-WebSocket-Programming/dp/1782166963

create dll file in c#

html5 Websockets development guidance的更多相关文章

  1. HTML5分析实战WebSockets基本介绍

    HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...

  2. HTML5分析实战WebSockets一个简短的引论

    HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...

  3. 《HTML5编程之旅》系列三：WebSockets 技术解析

    本文主要研究HTML5 WebSockets的使用方法,它是HTML5中最强大的通信功能,定义了一个全双工的通信信道,只需Web上的一个Socket即可进行通信,能减少不必要的网络流量并降低网络延迟. ...

  4. HTML5 postMessage 和 onmessage API 具体应用

    HTML5 postMessage 和 onmessage API 具体应用 随着 HTML5 的发展.了解并熟悉 HTML5 的 API 接口是很重要的.postMessage(send) 和 on ...

  5. 现在就使用HTML5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因: 它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码. HTML5是Web开发世界的一次重大的改变,事实 ...

  6. HTML5实现屏幕手势解锁(转载)

    来源:https://github.com/lvming6816077/H5lockhttp://threejs.org/examples/http://www.inf.usi.ch/phd/wett ...

  7. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  8. 使用HTML5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一次重大的改变,事实上不 ...

  9. Bone.io是一个轻量级的框架构建高性能实时单页HTML5应用程序

    Bone.io允许你使用HTML5 WebSockets构建实时应用程序,提供“热”数据到浏览器.这使您可以轻松地构建丰富的,高度响应的用户界面. 项目主页:http://www.open-open. ...

随机推荐

  1. After the exam

    离散数学考完啦!!!自我感觉还行,或许得不到高分,但是过的话是没问题了.(但愿成绩出来后不打脸) 持续了两周的复习,告一段落了.那么,今天就休息休息吧. 今天阴有雨,走过的地儿都是湿漉漉.滑溜溜的.这 ...

  2. Eclipse注释模板设置详解

    设置注释模板的入口:Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元素 ...

  3. [No0000A4]DOS命令（cmd）批处理：替换字符串、截取字符串、扩充字符串、获取字符串长度

    1.替换字符串,即将某一字符串中的特定字符或字符串替换为给定的字符串.举例说明其功能:========================================= @echo off set a ...

  4. java 静态内部类小总结

    内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和缺省的包访问权 ...

  5. Stream流

    在Node中,存在各式各样不同的数据流,Stream(流)是一个由不同对象实现的抽象接口.例如请求HTTP服务器的request是一个 流,类似于stdout(标准输出):包括文件系统.HTTP 请求 ...

  6. phoneGap+cordova+ionic混合app开发环境搭建

    参考链接:http://www.w2  bc.com/article/177257 待补充

  7. [NOI2006] 最大获利

    [NOI2006] 最大获利 ★★★☆   输入文件:profit.in   输出文件:profit.out   简单对比时间限制:2 s   内存限制:512 MB [问题描述] 新的技术正冲击着手 ...

  8. 台式机装原版Win2008R2

    台式机装原版Win2008R2 坑了老半天,总结出几点 1,系统os下载: http://msdn.itellyou.cn/ 注:其他地方下载的,装后发现不是起不来就是驱动装不了. 2,u盘里放个压缩 ...

  9. [LeetCode] Remove Duplicate Letters 移除重复字母

    Given a string which contains only lowercase letters, remove duplicate letters so that every letter ...

  10. Ubuntu apache2.4 设置虚拟主机

    每次重装系统如何配置都上网找,搞半天,都是不对的,还不如自己记下来,以作参考呢.我的项目目录是 /home/feiffy/demo/test,映射的域名是 test.com,这样在浏览器输入 test ...