WebSocket API和Socket.IO

来源：互联网发布：qq群群发软件编辑：程序博客网时间：2024/05/22 07:56

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

0 0