网络编程
位置:首页>> 网络编程>> 网页设计>> HTML5 WebSockets基础使用教程(4)

HTML5 WebSockets基础使用教程(4)

作者:暴风彬彬 来源:彬Go 发布时间:2010-09-21 12:48:00 

标签:HTML5,WebSockets,教程

我们将在我们的服务器定义URL。

var socket; 
var host = "ws://localhost:8000/socket/server/startDaemon.php";

你可能会发现URL中怎么没有http?恩,是的,这是一个WebSocket URL,使用了不同的协议。下面是URL分解图示:

下面让我们继续完成connect()函数,我们将代码放入try/catch块,这样如果代码出现问题,我们能让用户知道。我们创建WebSocket,并将信息传递到message()函数,之后会做讲解。我们创建我们的onopen、onmessage和onclose函数. 需要注意的是我们为用户提供了端口状态,这并不是必需的,但我们把它放进来主要是为了方便调试。

CONNECTING = 0
OPEN = 1
CLOSED = 2
function connect(){ 
    try{ 
    var socket; 
    var host = "ws://localhost:8000/socket/server/startDaemon.php"; 
    var socket = new WebSocket(host); 
        message('<p class="event">Socket Status: '+socket.readyState); 
        socket.onopen = function(){ 
             message('<p class="event">Socket Status: '+socket.readyState+' (open)'); 
        } 
        socket.onmessage = function(msg){ 
             message('<p class="message">Received: '+msg.data); 
        } 
        socket.onclose = function(){ 
             message('<p class="event">Socket Status: '+socket.readyState+' (Closed)'); 
        }            
    } catch(exception){ 
         message('<p>Error'+exception); 
    } 
}

message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。 我们在socket事件函数中为段落(<p>)标签创建适当的class,我们在message函数中只有一个段落结束标签。

function message(msg){ 
    $('#chatLog').append(msg+'</p>'); 
}

目前的成果  

如果你已按上面教程按部就班的做的话,很好,我们已经创建了 HTML/CSS 模板、创建并建立Websocket连接、通过创建连接保持用户的进展更新。

0
投稿

猜你喜欢

  • 写在前面:前一段时间 kejun 给我们培训JavaScript的时候,在幻灯片上推荐了很多特别经典的文章,其中就有这一篇。读过之后感觉很不
  • 在给blog加上无刷新搜索和即时验证检测后,又看了下代码,感觉太过麻烦,就把XMLHttpRequest请求封装到一个类里面,用起来方便多了
  • SQL Server 2005的新功能为动态管理对象,它们是在指定时间返回某个数据库实例的特殊状态信息的数据库视图或函数。这些对象允许数据库
  • 在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,在阅读《超越CSS:web设计艺术精髓》这本书的时候,发现原来we
  • JavaScript中的字符串函数没有像VBScript\ASP中的内部函数那么全.不能像VB那样直接利用left和right函数来实现对字
  • 一、css样式表滤镜的构成 滤镜作为样式表大家庭中的一员,它跟其他样式表元素的定义和应用方式当然是一样的,能够直接定义在HTML标识的<
  •  对于网站设计者而言,时常处理大批量的文件是难免的,特别是图片和一些文本文本文件,更是经常处理。而由于网站大量文件的关系,对于同类
  • 指定的代码页特性无效。 codepage属性:是指出网页的代码页 如果制作的网页脚本与WEB服务端的默认代码页不同,则必须指明代码页: 代码
  • 在MySQL服务器启动时,它检查其命令行的操作,来查看它是否应该执行登录并打开相应的日志文件(如果应该的话)。可以让服务器生成两种主要类型的
  • 【原文地址】 Tip/Trick: Supporting Full Screen Mode with Silverlight 【原文发表日期
  • 在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<div style="clear:both;">
  • <%dim conn     ’定义一个连接变量 dim&nbs
  • 译者:AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜,但它在使用中也会产生一系列的问题,本文对使用Alp
  • 昨天打包下载了一个服务器整站,拿到这个*.mdb的文件后,却不知道怎么用,百度了一下,才知道是一种木马打包的形式文件,不能用WINrar来解
  • 图片缩放会失真是真理,在浏览器里也一样,貌似使用传说中的双三次插值可以让失真看起来比较不明显,但是真的想不通IE7已经实现了,却不默认打开,
  • 如何用组件实现自动发送电子邮件?我想做一个能够自动发送电子邮件的程序,该如何做?    这就要用到w3 upl
  • 如果你想进一步了解如何用JavaScript来为网页添加交互性的话,你也许已经听过JavaScript的事件代理(event delegat
  • 虽然今年名义上已经不再管人了,但也不得不掺和进很多人事,这里想简单说说,即使不能帮助这个行业的从业者规划职业道路,也算是把之前摸过的路小结一
  • 在域环境下我没配置成果,也许是域用户的原因,因为我在生产环境下搞的,更改域用户需要重启SQLServer ,所以这个方法放弃了,只能用证书形
  • sql exist的妙用create table b(a varchar(10),b varchar(10),c varchar(10))i
手机版 网络编程 asp之家 www.aspxhome.com