管理进化

html5如何链接


很多人会好奇怎么把数据库等软件连接到自己的html5中,今天,我们就以websocket为例,来介绍一下链接方法,一起来看看吧。

一、概述

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”属性记录连接过程中的状态值。


最后,推荐我们的管理工具给大家。

智齿客服