WebSocket API是H5提供的下一代客户端-服务器的异步通信方法,该通信取代了单个的TCP套接字,使用ws或者wss协议,可以用于任意的客户端和服务器程序,并且现在已经受到大部分浏览器的支持
WebSocket API优势在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送消息,WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送消息,XHR受到了域的限制,而WebSocket允许跨域通信
套接字:源IP地址和目的IP地址以及源端口号和目的端口号的组合称为套接字,其用于标识客户端请求的服务器和服务
WebSocket API的用法(客户端):
1、创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
ws表示WebSocket协议
2、打开Socket
socket.onopen = function(event){}
3、发送一个初始化消息
socket.send('Hello World!');
4、监听消息
socket.onmessage = function(event){}
onmessage事件提供了一个data属性,可以包含消息的body部分,该部分必须是一个字符串,可以进行序列化或者反序列化的操作
5、监听Socket的关闭
socket.onclose = function(event){}
6、关闭Socket
socket.close()
关于Socket.IO
Socket.IO是WebSocket API的一种封装,同时包含了其它的连接方式,比如Ajax,原因是在于不是所有的浏览器都支持WebSocket(比如低版本的IE),通过Socket.IO的封装,便不用关心里面用了什么样的连接方式,在任何浏览器都能直接使用Socket.IO来建立异步的连接,Socket.IO包含了服务器端和客户端的库,它还提供了一个NodeJS API,它看起来非常像客户端API,另Socket.IO源码可以直接从GitHub下载
Socket.IO客户端用法:
1、创建Socket.IO实例,建立连接
var socket = new io.Socket('localhost',{port:8080});
socket.connect();
2、添加一个连接监听器
socket.on('connect',function(){})
3、监听消息
socket.on('message',function(data){})
4、添加一个关闭连接的监听器
socket.on('disconnect',function(){})
5、通过Socket发送一条消息到服务器
socket.send(message);
Socket.IO简化了WebSocket API,统一了返回运输的API,包括:
WebSocket、Flash Socket、AJAX long-polling、AJAX multipart streaming、IFrame、JSONP polling
NodeJS和Socket.IO联合开发服务器端
var http = require('http'),
io = require('socket.io');
//在8080端口启动服务器
var server = http.createServer(function(req,res){
res.writeHead(200,{
'Content-Type' : 'text/html'
});
res.end('<h1>Hello World!</h1>');
})
server.listen(8080);
//创建一个Socket.IO实例,把它传递给服务器
var socket = io.listen(server);
//添加一个连接监听器
socket.on('connection',function(client){
//现在开始监听接收到的消息
client.on('message',function(event){
console.log(123);
})
client.on('disconnect',function(){
clearInterval(interval);
console.log(456);
})
//每五秒发送消息到客户端
var interval = setInterval(function(){
client.send('This is message from the server!' + new Date().getTime());
},5000)
});
参考链接:
http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html