频道栏目
首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML5中websocket长连接的具体实现方法
2017-03-23 09:56:00         来源:朱麦迪的博客  
收藏   我要投稿
HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。

Socket又称为套接字,是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常情况下,Socket用于描述IP地址和端口,是通信过程中的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时,通过通信中的字符句柄,实现不同端口对应不同应用服务功能。

目前,大部分浏览器都支持HTML5中Socket API的运行。WebSocket连接服务器和客户端,这个链接是一个实时的长连接,服务器端一旦与客户端建立了双向链接,就可以将数据推送到Socket中,客户端只要有一个Socket绑定的地址和端口与服务器建立联系,就可以接收推送来的数据。

WebSocket API 的使用分为以下几个步骤:
步骤1、 创建连接,新建一个WebSocket对象十分的方便,代码如下:
var host = "ws://echo.websocket.org/";
var socket=new WebSocket(host);
注意:其中,URL必须以“ws”字符开头,剩余部分可以使用像HTTP地址一样来编写。该地址没有使用
HTTP协议写法,因为它的属性为WebSocket URL;URL必须由4个部分组成,分别是通信标记(ws)、主机名称 (host),端口号(port)及WebSocket Server.
步骤2,发送数据。当WebSocket对象与服务器建立联系后,使用如下代码发送数据:
socket.send(dataInfo);
注意:其中,objWs为新创建的WebSocket对象,send()方法中的dataInfo参数为字符类型,即只能使用文本数据或者 将JSON对象转换成文本内容的数据格式。
步骤3,接收数据。客户端添加事件机制接收服务器发送来的数据,代码如下:
socket.onmessage=function(event){
//弹出收到的信息
alert(event.data);
//其他代码
}
其中,通过回调函数中event对象的"data"属性来获取服务器端发送的数据内容,该内容可以是一个字符串或者JSON对 象。
步骤4 状态标志。通过WebSocket对象的“readyState”属性记录连接过程中的状态值。
"readyState"属性是一个连接的状态标志,用于获取WebSocket对象在连接,打开,变比中和关闭时的状态。该状态标志共有4中属性值,如下表所示:
————————————————————————————————————
属性值属性常量描述
————————————————————————————————————
0CONNECTING连接尚未建立
1OPEN WebSocket的链接已经建立
2CLOSING 连接正在关闭
3CLOSED 连接已经关闭或不可用
————————————————————————————————————
WebSocket对象在连接过程中,通过侦测这个状态标志的变化,可以获取服务器端与客户端连接的状态,并将连接状态已状态码形式返回给客户端。
步骤5 关闭socket连接。
socket.close();
————————————————————————————————————————————————————————————————
在实际应用中,socket服务器端的代码可以是Python,node.js,java,php。在这里我可以使用https://www.websocket.org/网站提供的,socket
服务端。协议地址为:ws://echo.websocket.org/
完整代码如下:
————————————————————————————————————————————————————————————————
<html>

<head>

<title>Jack张WebSocket实例</title>

<style>
html,body{font:normal 14px;margin:0 auto;}
#log {width:440px; 
            height:270px; 
            text-align:left;
            overflow:auto;margin:0px auto;
            font-weight:bold;color:#F8F8F8;
            }
#msg {width:330px;margin:0px auto;}
#imagebg{
    background-image: url(images/images.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height:643px;
    overflow:hidden;
    text-align:center;
    padding-top:120px;
}

</style>

<script>
//声明一个socket
var socket;
//初始化方法
function init(){
  var host = "ws://echo.websocket.org/";//声明host注意:是ws协议
  try{
    socket = new WebSocket(host);//新创建一个socket对象
    log('WebSocket - status '+socket.readyState);//将连接的状态信息显示在log
    socket.onopen    = function(msg){ log("Welcome - status "+this.readyState); };//监听打开连接
    socket.onmessage = function(msg){ log("Received: "+msg.data); };//监听当接收信息时触发匿名函数
    socket.onclose   = function(msg){ log("Disconnected - status "+this.readyState); };//关闭连接
  }
  catch(ex){ log(ex); }
  $("msg").focus();
}
//声明一个发送信息方法
function send(){
  var txt,msg;
  txt = $("msg");
  msg = txt.value;
  if(!msg){ alert("Message can not be empty"); return; }
  txt.value="";
  txt.focus();
  try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }
}
//声明一个对开连接,关闭socket方法
function quit(){
  log("Goodbye!");
  socket.close();
  socket=null;
}

// 根据id获取DOM元素
function $(id){ return document.getElementById(id); }
//将信息显示在id为log的p中
function log(msg){ $("log").innerHTML+="<br>"+msg; }
//键盘事件(回车)
function onkey(event){ if(event.keyCode==13){ send(); } }
</script>

</head>
<body onload="init()">
<p id="imagebg">
    <p style="width:520px;text-align:left;margin:0px auto;color:#000;"> <a href="https://weibo.com/jackyo"><strong>新浪微博:Jack张</strong& gt; </p>
    <br>
     <p id="log"></p>
     <input id="msg" type="textbox" onkeypress="onkey(event)"/>
     <button onclick="send()">发送</button>
     <button onclick="quit()">断开</button>

</p>
</body>
</html>

点击复制链接 与好友分享!回本站首页
上一篇:京东在html5页面中打开本地app的解决方案
下一篇:h5第三课列表
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站