HTML5 Web socket和socket.io - wishyouhappy

标签: html5 web socket | 发表时间:2014-05-19 17:35 | 作者:wishyouhappy
出处:

what is websockets


 

Two-way communication over ont TCP socket, a type of PUSH technology

   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等)

 

  原理:

  1. client利用regular http请求webpage
  2. 请求的webpage 执行javascript脚本,open a connection to server.
  3. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client  and from the client to the server

   HTML5 WebSockets

 

客户端


 

  说明:

  readyState:

CONNECTING (0):表示还没建立连接;
OPEN (1): 已经建立连接,可以进行通讯;
CLOSING (2):通过关闭握手,正在关闭连接;
CLOSED (3):连接已经关闭或无法打开;

  

  url: WebSocket 服务器的网络地址,协议通常是”ws”或“wss(加密通信)”,

  事件:

  • send:向服务器端发送数据
  • close 方法就是关闭连接;
  • onopen连接建立,即握手成功触发的事件;
  • onmessage收到服务器消息时触发的事件;
  • onerror异常触发的事件;

 

  使用例子:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');

// 打开Socket
socket.onopen = function(event) {

// 发送一个初始化消息
socket.send('I am the client and I\'m listening!');

// 监听消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
};

// 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};

// 关闭Socket....
//socket.close()
};

 

服务器端


 

  jWebSocket (Java)
  web-socket-ruby (ruby)
  Socket IO-node (node.js)

 

 下面以socket.io说明,环境说明:(node.js安装见  http://www.cnblogs.com/wishyouhappy/p/3647037.html

 1. 安装socket.io

 npm install -g socket.io

  2.使用require引入http和socket.io

var http = require("http");
var io= require('socket.io');

  3.创建server

var server = http.createServer(function(request, response){
response.writeHead(200,{"Content-Type":"text/html"});
response.write("WebSocket Start~~~~~~~~~~~~");
response.end("");
}).listen(8000);

 4.监听

var socket= io.listen(server);

 5.例子:

var http = require("http");
var io= require('socket.io');
var server = http.createServer(function(request, response){
response.writeHead(200,{"Content-Type":"text/html"});
response.write("WebSocket Start~~~~~~~~~~~~");
response.end("");
}).listen(8000);

var socket= io.listen(server);

// 添加一个连接监听器
socket.on('connection', function(client){

client.on('message',function(event){
console.log('Received message from client!',event);
});
client.on('disconnect',function(){
clearInterval(interval);
console.log('Server has disconnected');
});
});

 

数据发送两种方式send和emit


 

使用send和emit都可以发送数据,但是emit可以自定义事件,如下:

emit:

//服务器

socket.on('connection', function(client){
client.on('message',function(event){
client.emit('emitMessage', { hello: 'messgge received, wish you happy'+new Date().toString() });
});

});


//客户端
socket.on('emitMessage',function(data) {
document.getElementById("result").innerHTML+=data.hello + "<br />";

});

send:

//服务器

socket.on('connection', function(client){
client.send('hello, I am the server');
});


//客户端
socket.on('message',function(data) {
document.getElementById("result").innerHTML+=data + "<br />";

});

 

实例:(socket.io)


 

客户端:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
border-radius: 10px;
border: 2px solid pink;
width:800px;
}
</style>
</head>
<body>
<h1></h1>
<div id="result"></div>
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script>
//创建Socket.IO实例,建立连接

var socket = io.connect('http://localhost:8000');

// 添加一个连接监听器
socket.on('connect',function() {
console.log('Client has connected to the server!');
});

// 添加一个连接监听器
socket.on('message',function(data) {
document.getElementById("result").innerHTML+=data + "<br />";

});
socket.on('emitMessage',function(data) {
document.getElementById("result").innerHTML+=data.hello + "<br />";

});

// 添加一个关闭连接的监听器
socket.on('disconnect',function() {
console.log('The client has disconnected!');
});

// 通过Socket发送一条消息到服务器
function sendMessageToServer(message) {
socket.send(message);
}
var date = new Date();
var ms="Time: "+date.toString()+"Today is a nice day, wish you happy";
setInterval("sendMessageToServer(ms)",1000);
</script>

</body>
</html>

服务器:

var http = require("http");
var io= require('socket.io');
var server = http.createServer(function(request, response){
response.writeHead(200,{"Content-Type":"text/html"});
response.write("WebSocket Start~~~~~~~~~~~~");
response.end("");
}).listen(8000);

var socket= io.listen(server);

// 添加一个连接监听器
socket.on('connection', function(client){

client.on('message',function(event){
console.log('Received message from client!',event);
client.emit('emitMessage', { hello: 'messgge received, wish you happy'+new Date().toString() });
});
client.on('disconnect',function(){
// clearInterval(interval);
console.log('Server has disconnected');
});
client.send('hello, I am the server');
});

结果:

客户端:

服务器端:


本文链接: HTML5 Web socket和socket.io,转载请注明。

相关 [html5 web socket] 推荐:

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等). client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client .

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式. cookie:兼容性最好,但也有不少问题,下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性.

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候,我就开始尝试使用HTML5的新元素,具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客,刚开始,查看了大量老外博客,也归纳总结了一下使用场景,在什么情况下使用HTML5的新元素代替原有的没有语义性div,还有如何组织文档内容结构也是比较头疼的事情.

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯,第55卷,第7刊,16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程,工作方式和使用途径而言,都是一次非凡的革新. 新的标准简化了程序运行方式,协调了各种终端设备和应用程序之间互访的入口,给用户带了让人惊喜的全新功能.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍.   HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式.     localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;.

HTML5 Web Speech API,让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API. 传统的网站只能“说”,这个API的出现,让网站能“倾听”用户. 这个功能已经开放了一系列的用法,非常棒. 在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子. 声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日).

有关socket read

- - 五四陈科学院
以下内容由 [五四陈科学院]提供. 实际开发中,网络程序最可能遇到的就是数据没收到、收到错误数据这样诡异的问题.. 很多时候,都是由于对socket read的细节理解的不一致,导致了程序前后的矛盾. 下面详细阐述整个read的过程. read函数是负责从fd中读取内容.. 当读成功时, read返回实际所读的字节数.

Web程序员们,你准备好迎接HTML5了吗?

- 小伟 - 博客园-首页原创精华区
作者: dangjian 发表于 2010-09-07 01:44 原文链接 阅读: 4674 评论: 37. HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverlight等插件,也简化了原来需要大量JS才能达到的效果.