WebSocket将取代ajax？

最新推荐文章于 2024-07-22 14:05:17 发布

Ahren_ye

最新推荐文章于 2024-07-22 14:05:17 发布

阅读量1.5k

点赞数

分类专栏： HTML5 文章标签： websocket ajax javascript sockets 服务器 function

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

WebSocket

一、Web Sockets通信的基本知识

Web Sockets是HTML 5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术，因此受到了高度关注。

使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显式关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无须重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动转为了主动。

二、使用Web Sockets API

Web Sockets的API本身非常简单。将URL字符串作为参数，然后调用WebSocket对象的构造器来建立与服务器之间的通信连接，如下所示。

折叠展开 JavaScript 代码复制内容到剪贴板

var webSocket = new webSocket("ws://localhost:8005/socket");

URL字符串必须以“ws”或“wss”（加密通信时）文字作为开头。这个URL字符串被设定好之后，在JavaScript脚本中可以通过访问WebSocket对象的url属性来重新获取。

通信连接建立好之后，就可以进行客户端与服务器端的双向通信了。使用WebSocket对象的send方法对服务器发送数据，只能发送文本数据，但是可以使用JSON对象把任何JavaScript对象转换成文本数据后进行发送。使用send方法的代码如下所示。WANGYEXX.COM

另外，可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值：

★ CONNECTING（数字值为O），表示正在连接。

★ OPEN（数字值为1），表示已建立连接。

★ CLOSING（数字值为2），表示正在关闭连接。

★ CLOSED（数字值为”，表示已关闭连接。

折叠展开 JavaScript 代码复制内容到剪贴板

webSocket.send("data");

通过获取onmessage事件句柄来接收服务器传过来的数据，如下所示。

折叠展开 JavaScript 代码复制内容到剪贴板

webSocket.onmessage=function(event)
{
var data=event:data;
}

通过获取onopen事件句柄来监听socket的打开事件，如下所示。

折叠展开 JavaScript 代码复制内容到剪贴板

webSocket.onopen=function(event)
{
//开始通信时的处理
};

通过获取onclose事件句柄来监听socket的关闭事件，如下所示。

折叠展开 JavaScript 代码复制内容到剪贴板

webSocket.onclose=function(event)
{
//通信结束时的处理
};

通过close方法来关闭socket，切断通信连接，如下所示。

折叠展开 JavaScript 代码复制内容到剪贴板

webSocket.close();

另外，可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值：

★ CONNECTING（数字值为O），表示正在连接。

★ OPEN（数字值为1），表示已建立连接。

★ CLOSING（数字值为2），表示正在关闭连接。

★ CLOSED（数字值为”，表示已关闭连接。

三、Web Sockets API使用示例

接下来，我们在示例1中看一个完整的使用Web Sockets的示例，在运行该示例之前，首先要在服务器端指定好它用的socket（套接字）应用程序，并且在服务器的配置文件中指定好运行该socket应用程序的主机与端口，然后再运行配置好的服务器，本示例中的服务器端就准备好了。

这里，我们主要看一下怎样在客户端使用Web Sockets技术与服务器端进行连接并且收发信息。

<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>

四、发送对象

在前面我们介绍过，使用WebSockets API，不仅可以发送文本数据，而且可以使用JSON对象来发送一切JavaScript中的对象。使用JSON对象的关键是使用它的两个方法——JSON.parse方法与JSON.stringify方法，其中JSON.stringify方法把JavaScript对象转换成为文本数据，JSON.parse方法将文本数据转回为JavaScript对象。接下来我们示例2中看一下具体怎么使用JSON对象来发送和接收JavaScript对象，在该示例中，假定接收的对象为一个操纵数据库的对象，根据数据库对象的类型来选择数据库，然后在数据库中插入接收的数据，最后把插入结果与时间作为对象重新使用WebSocket对象进行返回。

<script> 
var host="ws://localhost:8005/socket"; 
var webSocket=new WebSocket(host); 
var userName; 
var userAge; 
var successFlag; 
var currentTime; 
webSocket.onmessage=function(event) 
{ 
    var DataBase=JSON.parse(event.data); 
    userName= DataBase.userName; 
    userAge= DataBase.userAge; 
    successFlag=false; 
    if(DataBase.DataType=="SQLServer") 
    {  
        //在SQL Server数据库中插入数据 
        successFlag=InsertSQLData(); 
    } 
    else if(DataBase.DataType=="ORACLE") 
    { 
        //在ORACLE数据库中插入数据 
        successFlag=InsertORACLEData(); 
    } 
    currentTime= new Date(); 
    webSocket.send(JSON.stringify({ 
        result:successFlag, 
        time: currentTime} 
    )); 
} 
</script>