html5 Websockets development guidance
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的更多相关文章
- HTML5分析实战WebSockets基本介绍
HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...
- HTML5分析实战WebSockets一个简短的引论
HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...
- 《HTML5编程之旅》系列三：WebSockets 技术解析
本文主要研究HTML5 WebSockets的使用方法,它是HTML5中最强大的通信功能,定义了一个全双工的通信信道,只需Web上的一个Socket即可进行通信,能减少不必要的网络流量并降低网络延迟. ...
- HTML5 postMessage 和 onmessage API 具体应用
HTML5 postMessage 和 onmessage API 具体应用 随着 HTML5 的发展.了解并熟悉 HTML5 的 API 接口是很重要的.postMessage(send) 和 on ...
- 现在就使用HTML5的十大原因
你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因: 它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码. HTML5是Web开发世界的一次重大的改变,事实 ...
- HTML5实现屏幕手势解锁(转载)
来源:https://github.com/lvming6816077/H5lockhttp://threejs.org/examples/http://www.inf.usi.ch/phd/wett ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- 使用HTML5的十大原因
你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一次重大的改变,事实上不 ...
- Bone.io是一个轻量级的框架构建高性能实时单页HTML5应用程序
Bone.io允许你使用HTML5 WebSockets构建实时应用程序,提供“热”数据到浏览器.这使您可以轻松地构建丰富的,高度响应的用户界面. 项目主页:http://www.open-open. ...
随机推荐
- hdu1452 Happy 2004(规律+因子和+积性函数)
Happy 2004 题意:s为2004^x的因子和,求s%29. (题于文末) 知识点: 素因子分解:n = p1 ^ e1 * p2 ^ e2 *..........*pn ^ en 因子 ...
- Gearman使用示例
最近的一个旧项目重构过程中,使用到了gearman这个开源项目,简单来讲,这是一个类似MQ的异步系统,一边派发任务,一边处理任务(有类似MQ中的消息发送方与接收方),目前支持java,php等多种语言 ...
- 从2G到5G, 基站天线过去与未来
在蜂窝移动通信系统中,天线是电路信号与空间辐射电磁波的转换器,是移动通信系统的末梢关键组成部分. 从2G到4G,移动基站天线经历了全向天线.定向单极化天线.定向双极化天线.电调单极化天线.电调双极化天 ...
- chpasswd-批量修改用户密码
批量修改用户密码 工作原理: 从系统的标准输入读入用户的名称和口令,并利用这些信息来更新系统上已存在的用户的口令 语法: :# echo 用户名:密码 | chpasswd :# chpasswd & ...
- C语言内存分配方法。
当C程序运行在操作系统上时,操作系统会给每一个程序分配一定的栈空间. 堆为所有程序共有的,需要时需要申请访问. 一.栈 局部变量.函数一般在栈空间中. 运行时自动分配&自动回收:栈是自动管理的 ...
- 混合使用UITabBarController和UINavigationController
混合使用这两个控件的好处是我们可以在NavigationBar添加更多的东西,如标题,按钮等.让用户能够获得更多的信息. UITabBarController的属性ViewControllers接受以 ...
- celery 框架
转自:http://www.cnblogs.com/forward-wang/p/5970806.html 生产者消费者模式 在实际的软件开发过程中,经常会碰到如下场景:某个模块负责产生数据,这些数据 ...
- 从PHP底层源码去深入理解数组，并用C模拟PHP关联数组（原创）
PHP是一门入门容易,使用范围广泛的语言,以其灵活性以及web后端开发被很多人熟知,也被很多人戏称“PHP是世界上最好的语言”.本人是一名“忠实”的PHPer,相信用过PHP的程序员都会体会到PHP数 ...
- 比较.NET程序集(DLL或EXE)是否相同
如何比较两个.NET程序集(DLL或EXE)是否相同呢? 直接比较文件内容?当然没那么简单了,这个你可以去试试,去比较一下两次Build产生的程序集, 就算内容没有改变,产生的程序集的二进制文件也是不 ...
- Android Hook技术
原文:http://blog.csdn.net/u011068702/article/details/53208825 附:Android Hook 全面入侵监听器 第一步.先爆项目demo照片,代码 ...