WebSockets通信
Web Sockets是H5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的,也是永久的,除非被显示关闭。这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户端的浏览器中,无需重新建立连接。只要客户端有一个被打开的socket(套接字)并且与服务器建立了连接,服务器就可以把数据推送到这个socket上,服务器不再需要轮询客户端的请求,从被动转为了主动。
API的基本用法
要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接的对端URL字符串。ws://
和wss://
前缀分别表示WebSocket连接和安全的WebSocket连接。
if(window.WebSocket){ //进行检测,确保浏览器支持WebSocket
var webSocket=new WebSocket("ws://localhost:8005/socket");
}
打开socket后只需要等待事件发生,而不需要主动向服务器轮询,所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件:open
、close
和message
。当连接建立时触发open
事件,当收到消息时触发message
事件,当WebSocket连接关闭时触发close
事件。
webSocket.onopen=function(event)
{
//开始通信时的处理
webSocket.send("Hello WebSocket!");
}
webSocket.onmessage=function(event)
{
var data=event.data;
}
webSocket.onclose=function(event)
{
//结束通信时的处理
}
当socket处于打开状态(即调用onopen
监听程序之后,调用onclose
监听程序之间前),可以采用send
方法来向服务器发送数据。只能发送文本数据,但是可以使用JSON对象把任何JS对象转换成文本数据后进行发送。
document.getElementById("sendBtn").onclick=function(){
webSocket.send("data");
}
消息发送完成后,可以通过close
方法来关闭socket,切断通信连接。
webSocket.close();
另外,还可以通过读取readyState
的属性值来获取WebSocket对象的状态。readyState
属性存在以下几种属性值:
- CONNECTING(数字值为0),表示正在连接。
- OPEN(数字值为1),表示已建立连接。
- CLOSING(数字值为2),表示正在关闭连接。
- CLOSED(数字值为2),表示已关闭连接。
实例
在运行前,首先要在服务器端指定好它的socket(套接字)应用程序,并在服务器的配置文件中指定好运行该socket应用程序的主机与端口,然后再运行配置好的服务器。
<html>
<meta charset="UTF-8"></meta>
<head>
<title>WebSockets客户端示例</title>
</head>
<script>
var webSocket;
function connect()
{
try
{
var readyState=new Array("正在连接","已建立连接","正在关闭连接","已关闭连接");
var host="ws://localhost:8005/socket";
webSocket=new WebSocket(host);
var message=document.getElementById("message");
message.innerHTML+="<p>Socket状态:"+readyState[webSocket.readyState]+"</p>";
webSocket.onopen=function()
{
message.innerHTML+="<p>Socket状态:"+readyState[webSocket.readyState]+"</p>";
}
webSocket.onmessage=function(msg)
{
message.innerHTML+="<p>接收信息:"+msg.data+"</p>";
}
webSocket.onclose=function()
{
message.innerHTML+="<p>Socket状态:"+readyState[webSocket.readyState]+"</p>";
}
}
catch(exception)
{
message.innerHTML+="<p>有错误发生</p>";
}
}
function send()
{
var text=document.getElementById("text").value;
var message=document.getElementById("message");
if(text=="")
{
message.innerHTML+="<p>请输入一些文字</p>";
return;
}
try
{
webSocket.send(text);
message.innerHTML+="<p>发送数据:"+text+"</p>";
}
catch(exception)
{
message.innerHTML+="<p>发送数据出错</p>";
}
document.getElementById("text").value="";
}
function disconnect()
{
webSocket.close();
}
</script>
<body>
<h1>WebSockets客户端示例</h1>
<div id="message"></div>
<p>请输入一些文字</p>
<input id="text" type="text"></input>
<button id="connect" onclick="connect();">建立连接</button>
<button id="send" onclick="send();">发送数据</button>
<button id="disconnect" onclick="disconnect();">断开连接</button>
</body>
</html>