第42篇白板同步延迟问题（四）及data传输模式分析（一）

关键词：白板同步延迟问题, data传输模式分析

一、data传输模式分析

在白板中，流传输大致分为三大类，分别是音频流传输，视频流传输，数据流传输。目前的情况是音频，视频传输没问题，就数据流传输有延迟的情况。下面着重分析数据流的传输。

数据流的传输分为两方面：线条图片传输及聊天数据传输。

1. 线条图片传输分析

          function appendDIV(event) {

               console.log('event--->',event);

               console.log('event.data-------------------->',event.data);

 

                //同步线条图片数据

            // mfustart

           if(event.data === 'plz-sync-points') {

                designer.sync();

               return;

            }

 

           designer.syncData( event.data );

            // mfuend

 

 

           //同步聊天数据

           // alert(typeof event.data);

           if (typeof event.data !== 'object') {

                var div =document.createElement('div');

                div.innerHTML = event.data ||event;

 

                if(connection.getAllParticipants() == document.getElementById('room-id').value) {

                    div.style.color ="Red";

                } else {

                    div.style.color ="Blue";

                }

                chatContainer.insertBefore(div,chatContainer.firstChild);

                div.tabIndex = 0;

                div.focus();

 

                document.getElementById('input-text-chat').focus();

           }

       }

 

 

上述的核心代码如下：

           if(event.data === 'plz-sync-points') {

               designer.sync();

               return;

            }

           designer.syncData( event.data );

 

上述代码表明，当收到客户端发的信息plz-sync-points时，就要做数据同步，那什么时候会收到这个信息呢？答案是：在白板上画线条或传图片时，如下代码：

        if(designer.pointsLength <= 0) {

                // make sure that remote usergets all drawings synced.

                setTimeout(function() {

                  

                    connection.send('plz-sync-points');

                }, 1000);

           }

如果画版上，有内容，它会每秒向另一端发送个消息plz-sync-points，要求同步数据。

注：有点蒙圈，上述话的意思经过测试好像是这样：当什么都没写时，同步一次。

   明天再看吧，问题是找到了，上述程序理解错啦！

2016年12月25日星期日