Html5 web 服务器开发,使用HTML5 WEBSOCKET API开发双向浏览器-服务器站点

msgdiv.appendChild(document.createTextNode(msg.messages[i])); docfrag.appendChild(msgdiv);

}

chatlog.appendChild(docfrag);

};

chatcomm.onclose = function() {

alert("The chatroom connection was lost. Refresh page to reconnect.");

};

document.getElementById("sendmsg").addEventListener("click",     function(){ var newmsg = document.getElementById("newmsg");

chatcomm.send(newmsg.value); // send the message to the server

newmsg.value = ""; // clear out the message entry box

},false);

让我们分解一下代码。首先，我们创建套接字并将其指向服务器上的某个位置。在我们的示例中，服务器URL使用“ ws：//”协议，而不是您所熟悉的更为常见的“ http：//”。这表明Web套接字在客户端和服务器之间使用的特殊协议。

接下来，我们在套接字对象上设置两个事件侦听器：onmessage和onclose。

onclose处理程序是不言自明的—当连接关闭时将触发该处理程序。

我们的onmessage处理程序会接收一串数据(在我们的示例中，我们希望是JSON)并将其解析为消息对象。消息对象包含一个或多个消息的数组(每个消息只是简单的文本)。处理程序循环遍历每条消息，并按照接收到的顺序将其添加到聊天日志中。

最后，代码在“发送消息”按钮上设置了一个单击事件处理程序。单击后，处理程序将使用send(...)方法将输入到文本输入中的任何内容发送到服务器。

摘要

诚然，这种功能并不是全新的。自Ajax问世以来，使用XMLHttpRequest(“ XHR”)对象，开发人员一直在浏览器和服务器之间发送和接收数据。其他方法包括实例化不可见的Flash对象和使用Flash的套接字通信功能。

但是，在XHR方法中，为需要从浏览器发送到服务器的每条数据建立一个全新的连接，效率很低。同样，实例化大量内存的Flash实例以使用套接字通信也是不可取的。因此，可以理解，Web套接字是“ HTML5＆Friends”技术家族的受欢迎的补充。

Web套接字中的消息发送和接收就像XHR和Web Workers之间的合理组合，我们在前面的食谱中已经介绍过。

与XHR相似，WebSocket对象实例具有readyState属性，该属性使您可以检查连接状态。它可以具有以下常量值：

{worker} .CONNECTING(数值0)

尚未建立连接

{worker} .OPEN(数值1)

连接已打开并且可以进行通信

{worker} .CLOSING(数值2) )

连接正在关闭

{worker}。CLOSED(数值3)

连接已关闭(或从未成功打开)

WebSocket对象实例触发的事件是：

打开

连接打开时调用

信息

从服务器收到消息后调用

错误

套接字发生错误(发送或接收)时调用

关

连接关闭时调用

对于这些事件中的每一个，都可以使用addEventListener(...)添加事件侦听器，或者可以直接在工作对象实例上设置相应的处理程序，包括onopen，onmessage，onerror和onclose。

如果不支持Web套接字，则需要为您的应用程序提供一些后备功能，或者至少正常地通知用户其浏览器不支持所需的功能。幸运的是，有一个非常简单的方法可以做到这一点。

由于浏览器对Web套接字的一致支持一直难以捉摸，因此使用Web套接字的最佳实践建议是使用Socket.io之类的库，该库将尝试使用Web套接字(如果可用)，并且在Web时退回到多种其他通信技术套接字不存在。

您还应该了解Web套接字使用情况如何根据服务器资源进行扩展。传统的Web请求一次仅占用服务器一秒钟的专用资源，这意味着您可以从服务器提供大量Web流量，而不会出现过多的重叠，从而耗尽资源。

另一方面，套接字往往更加专用，因此在高负载下资源可用性可能会出现问题。您的服务器设置和体系结构将随应用程序的需求而变化很大，并且是您能否很好地利用Web套接字的重要因素。