当前位置: 首页 > 工具软件 > WebSocket.IO > 使用案例 >

WebSocket API和Socket.IO

南门意蕴
2023-12-01

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

 类似资料: