HTML5实战与剖析之使用HTML5 WebSocket API

逃离我推掉我的手 2022-09-20 08:36 148阅读 0赞

通过引入一个简洁的接口(见下面的清单),开发者可以替代技术,如长轮询和“永远帧,因此进一步降低延迟。

***后台代码***

[Constructor(in DOMString url, optional in DOMString protocol)]
    [构造函数(DOMString url,可选DOMString协议)]
    interface WebSocket { 
    	//readonly attribute DOMString URL;
    	//只读的属性DOMString URL;
    	// ready state
    	const unsigned short CONNECTING = 0;
    	const unsigned short OPEN = 1;
    	const unsigned short CLOSED = 2;
    	readonly attribute unsigned short readyState;
    	readonly attribute unsigned long bufferedAmount;  
    	// networking
    	attribute Function onopen;
    	attribute Function onmessage;
    	attribute Function onclose;
    	boolean send(in DOMString data); 
    	void close();
    };
    WebSocket implements EventTarget;  WebSocket实现EventTarget;

利用WebSocket接口不能简单。连接到一个端点,就创建一个新的WebSocket实例,为新对象提供一个URL,代表你想要连接的端点,如以下示例所示。请注意,ws:/ /和wss:/ /前缀表明WebSocket和安全提出了WebSocket连接,分别。

***JavaScript代码***

var myWebSocket = new WebSocket("ws://www.websockets.org");

建立WebSocket连接从HTTP协议升级到WebSockets协议在初始客户端和服务器之间的握手。连接本身是通过“onmessage”和“发送”功能定义的WebSocket接口。

连接到一个端点发送消息之前,您可以将一系列事件监听器来处理连接的生命周期的每个阶段,如以下示例所示。

***JavaScript代码***

myWebSocket.onopen = function(evt) { alert("Connection open ..."); }; 
    myWebSocket.onmessage = function(evt) { alert( "Received Message: " + evt.data); }; 
    myWebSocket.onclose = function(evt) { alert("Connection closed."); };

向服务器发送一条消息,只需调用“发送”,并提供您希望提供的内容。发送消息后,称之为“接近”终止连接,如以下示例所示。正如你所看到的,真的无法更加容易。

***JavaScript代码***

myWebSocket.send("Hello WebSockets!"); 
    myWebSocket.close();