基于UDP的H5跨屏实现

基于UDP的H5跨屏实现

不知你们见过一种效果没，在展厅上我们看到一个图片从一个屏幕好像无缝穿越到了另一个屏幕，看起来好像很高大上的样子。今天我们就是来做这么一件事情的。

实现这个效果的还是建立在我之前的局域网同步播放之上的。有一台设备做为主机作为参照（这里选择拼接在一起的设备的最坐边的设备）：
大家都进行相应的位移操作，起始x坐标是相对于主机的距离。如下图示，

A的坐标 为 X，Y;
B的坐标为 X+A.width,Y;
C的坐标为 X+A.width+B.width,Y;

假设A发起组播，大家都以相同的速度进行位移，当A中图片移出屏幕时B便出现。

为了使这个效果可以进一步的扩展，我们把这个操作放到webview中，换做一个div对象。核心的逻辑部分交给JS来处理（DIV对象的创建和DIV对象位置更新）。
主机设备以udp多播形式转发js传送过来的创建或者更新位置操作。局域网中的设备获取到组播数据包后 load 相应的js方法 并将传过来的参数传入即可。

今天重点讲解下js部分的逻辑处理。 Js这边也是提供了一个消息的发送和处理的操作。发送消息是H5对象的创建以及更新，其余window收到消息后进行创建或者更新。可参照以下代码。

发送消息：

 function vikSendMessage(str) {
    if (!isTopestWindow()) return;

    var topwin = getTopWindow();
    try {
        topwin.VisJsApi && topwin.VisJsApi.sendMessage && topwin.VisJsApi.sendMessage(str)
    } catch (b) {
        debugMessage("vikSendMessage...error:" + b.message)
        return 99
    }
    return 0
}

处理消息：

function vikReceivedMessage(data) {
    if (!isTopestWindow()) return;

    var topwin = getTopWindow();
    try {
        var params = data.split("#");
        if (typeof params[0] != 'string' || typeof params[1] != 'string')
            return;

        var items = {
            type: params[0],
            data: {
                act: params[1],
                data: data.substr(params[0].length + params[1].length + 2)
            }
        };

        window.postMessage(items, '*');
    } catch (b) {
        debugMessage("vikReceivedMessage...error:" + b.message)
        return 99
    }
    return 0
}

window.postMessage 是H5的一个新功能 。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。

页面收到消息之后再将消息发出，获取到消息后再判断我们是进行对象的创建还是更新相应的位置

    OnMessageHandle.uniqueOn('dynamicdiv', function(data) {

        if (data.act == 'create')
            createDynamicDiv(data.data);
        else if (data.act== 'update') {
            var params = data.data.split('#');

            var divid = params[0];

            var $obj = $("#" + divid);
            if ($obj.length == 0) return;

            var w = parseInt(params[3]);
            var h = parseInt(params[4]);

            var left = w - locationX;
            var top = h - locationY;

            // postJsError("divid:", divid, "w: ", w, "h: ", h, "left: ", left, "top: ", top);

            if (((left + $obj.width()) < 0) && ((top + $obj.height()) < 0))
                return;

            $obj.animate({
                left: left,
                top: top
            });
        }
    });

具体实现代码android 端和web 页面的最近整理周末会分享出来。

---