HTML5编程之旅 第3站 WebSockets

Stella981
• 阅读 466

        本文主要研究HTML5 WebSockets的使用方法,它是HTML5中最强大的通信功能,定义了一个全双工的通信信道,只需Web上的一个Socket即可进行通信,能减少不必要的网络流量并降低网络延迟。HTML5 WebSockets能使数据从几千字节减少到两字节,延迟从150ms减少到50ms,并且完美淘汰传统的Comet和Ajax轮询(polling)、长轮询(long-polling)以及流(streaming)解决方案。

      目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet。Comet技术可以让服务器主动以异步方式向客户端推送数据。

      使用轮询时,浏览器定期发送HTTP请求,并随即接收响应;使用长轮询时,浏览器向服务器发送一个请求,服务器会在一段时间内将其保持在打开状态;使用流解决方案时,浏览器会发送一个完整的HTTP请求,但服务器会发送并保持一个处于打开状态的响应,该响应持续更新并无限期处于打开状态。

      上述的三个方法,在发送实时数据时都会涉及到HTTP请求和响应包头,且包含大量额外的、不必要的报头数据,会造成传输延迟。

一、解读HTML5 WebSockets

1、WebSocket握手

      为了建立WebSocket通信,客户端和服务器在初始握手时,将HTTP协议升级到WebSocket协议。一旦连接建立成功,就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。

      注:在网络中,每个消息以0x00字节开头,以0xFF结尾,中间数据采用UTF-8编码格式。

2、WebSocket接口

      除了对WebSocket协议的定义之外,还定义了用于JavaScript应用程序的WebSocket接口。

interface WebSocket{

readonly attribute DOMString URL;

//就绪状态

const unsigned short CONNECTING = 0;

const unsigned short OPEN = 1;

const unsigned short CLOSED = 2;

readonly attribute unsigned short readyState;

readonly attribute unsigned short bufferedAmount;

//网络

attribute Function onopen;

attribute Function onmessage;

attribute Function onclose;

boolean send(in DOMSString data);

void close();

};

WebSocket implements EventTarget;

      注意:ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

二、HTML5 WebSockets API

      本节讨论HTML5 WebSockets的使用方法

1、检测浏览器是否支持

      通过window.WebSocket来判断浏览器是否支持。

2、API的基本用法

a. WebSocket对象的创建以及与WebSocket服务器的连接

url = "ws://localhost:8080/echo";

ws = new WebSocket(url);

上述两行代码也可以合并为一行代码:

ws = new WebSocket("ws://localhost:8080/echo");

b. 添加事件监听器

      WebSocket遵循异步编程模型,打开socket后,只需等待事件发生,而不需主动向服务器轮询,因此需要添加回调函数来监听事件。

      WebSocket对象有三个事件:open、close和message。当连接建立时触发open事件,当收到消息时触发message事件,当WebSocket连接关闭时触发close事件。

ws.onopen = function(){

    log("open");

}

ws.onmessage = function(){

    log(e.data);

}

ws.onclose = function(){

    log("closed");

}

c. 发送消息

当socket处于打开状态(即调用onopen监听程序之后,调用onclose监听程序之前),可以使用send方法发送消息。

ws.send("Hello World");

三、HTML5 WebSockets 应用示例

本节将结合前面讲述的Geolocation接口来创建一个直接在Web页面中计算距离的应用。

1、编写HTML文件

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>HTML5 WebSocket / Geolocation 追踪器</title>

        <link rel="stylesheet" href="styles.css">

    </head>

    <body onload="loadDemo()">

        <h1>HTML5 WebSocket / Geolocation 追踪器</h1>

        <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div>

        <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div>

    </body>

</html>

2、添加WebSocket代码

function loadDemo(){

    //确保浏览器支持WebSocket

    if(window.WebSocket){

        url = "ws://localhost:8080";//broadcast WebSocket服务器位置

        ws = new WebSocket(url);

        ws.onopen = function(){

            updateSocketStatus("连接已建立");

        }

        ws.onmessage = function(e){

            updateSocketeStatus("更新位置数据:" + dataReturned(e.data));

        }

    }

}

3、添加Geolocation代码

var geo;

if(navigator.geolocation){

    geo = navigator.geolocation;

    updateGeolocationStatus("浏览器支持HTML5 Geolocation");

}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次

function updateLocation(position){

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    var timestamp = position.timestamp;

    updateGeolocationStatus("位置更新时间:" + timestamp);

    var toSend = JSON.stringify([myId,latitude,longitude]);

    sendMyLocation(toSend);

}

4、合并所有内容

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>HTML5 WebSocket / Geolocation 追踪器</title>

        <link rel="stylesheet" href="styles.css">

    </head>

    <body onload="loadDemo()">

        <h1>HTML5 WebSocket / Geolocation 追踪器</h1>

        <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div>

        <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div>

        </body>

    <script>

        //WebSocket的引用

        var ws;

        //为该会话生成的唯一随机的ID

        var myId = Math.floor(100000*Math.random());

        //当前显示的行数

        var rowCount;

        function updateSocketStatus(message){

            document.getElementById("socketStatus").innerHTML = message;

        }

        function updateGeolocationStatus(message){

            document.getElementById("geoStatus").innerHTML = message;

        }

        function loadDemo(){

        //确保浏览器支持WebSocket

            if(window.WebSocket){

                url = "ws://localhost:8080";//broadcast WebSocket服务器位置

                ws = new WebSocket(url);

                ws.onopen = function(){

                updateSocketStatus("连接已建立");

            }

            ws.onmessage = function(e){

                updateSocketStatus("更新位置数据:" + dataReturned(e.data));

            }

        }

        var geo;

        if(navigator.geolocation){

            geo = navigator.geolocation;

            updateGeolocationStatus("浏览器支持HTML5 Geolocation");

        }

        geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次

        function updateLocation(position){

            var latitude = position.coords.latitude;

            var longitude = position.coords.longitude;

            var timestamp = position.timestamp;

            updateGeolocationStatus("位置更新时间:" + timestamp);

            var toSend = JSON.stringify([myId,latitude,longitude]);

            sendMyLocation(toSend);

        }

        function sendMyLocation(newLocation){

            if(ws){

                ws.send(newLocation)

            }

        }

        function dataReturned(locationData){

            var allData = JSON.parse(locationData);

            var incomingId = allData[1];

            var incomingLat = allData[2];

            var incomingLong = allData[3];

            var incomingRow = document.getElementById(incomingId);

            if(!incomingRow){

                incomingRow = document.getElementById("div");

                incomingRow.setAttribute("id",incomingId);

                incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount;

                rowCount++;

                document.body.appendChild(incomingRow);

            }

            incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " +

                                            incomingLat + " \\ Lon: " +

                                            incomingLong;

            return incomingRow.userText;

        }

        function handleLocationError(error){

            switch(error.code){

                case 0:

                  updateGeolocationStatus("检索位置信息出错: " + error.message);

                  break;

                case 1:

                  updateGeolocationStatus("用户阻止获取位置信息。");

                  break;

                case 2:

                  updateGeolocationStatus("浏览器不能检测你的位置信息: " + error.message);

                  break;

                case 3:

                  updateGeolocationStatus("浏览器检索位置信息超时。");

                  break;

            }
        }

    </script>

</html>

注意:上述代码的运行需要一个额外服务器的支持,在此把原书里提供的使用Python写的服务器文件附上,关于如何运行Python,请参考网上其他资料。

本文的源码请从http://git.oschina.net/niweiwei/HTML5/tree/master/websocket上进行下载。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Stella981 Stella981
2年前
HTML5 WebSockets+NodeJs 实例教程
HTML5中WebSockets是极其重要的部分,它的一个好处之一是减少了不必要的网络流量。它主要是用于在客户机和服务器之间建立单一的双向连接。这意味着客户只需要发送一个请求到服务端,那么服务端则会进行处理,处理好后则将其返回给客户端,客户端则可以在等待这个时间继续去做其他工作,整个过程是异步的。WebSockets应用的场景是很广泛的,当需要实
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这