浏览器多用户共享操作的思考

简介: 可惜这个想法已经被一家做电子阅读的公司申请专利了,就算做了一次关于产品的思考吧!欢迎一起讨论浏览器的社交化方向! 基本架构       两台运行指定浏览器的设备可以通过三种方式进行交互:   1. 在相同WiFi网络内使用TCP/UDP连接。

可惜这个想法已经被一家做电子阅读的公司申请专利了,就算做了一次关于产品的思考吧!欢迎一起讨论浏览器的社交化方向!


基本架构

     

两台运行指定浏览器的设备可以通过三种方式进行交互:

  1. 在相同WiFi网络内使用TCP/UDP连接。

  2.与适配过的设备通过蓝牙协议连接。

  3.使用账号或当前地理信息利用远端服务器与指定的用户或附件的人连接。

 

基本流程

 基本流程如下:

      

Step 1.在要分享的页面,选择分享的方式,列出可用的连接方式。

Step 2.根据用户选择,执行不同的连接及搜索,列出可用设备列表供用户选择:

  2.1 WiFi连接

  先使用UDP进行本网段内广播,找出正在使用相同浏览器的设备。

  2.2 蓝牙连接

  让用户选择已经匹配过的设备。

  2.3 指定的用户

  连接到远端服务器,查到指定的用户或某个用户创建的组。

  2.4 附近的用户

  将本地地理信息上传,并在服务器上找出附近的用户。

Step 3.用户选择一个目标设备后,尝试进行连接并询问使用的浏览器是否支持当前的操作。如果支持,则发送连接请求。

Step 4.对方在收到连接请求后,选择“接受”或“拒绝”。同时可以设定:

   I.是否接受对方页面操作

   II.是否允许操作所有页面

第一项设定,如果未选中,则表示仅是分享页面,打开页面后,就会关闭连接。

如果选中,则可以继续同步自己对页面的操作到对方的设备,包括打开链接、输入等操作。

第二项设定,如果选中,表示可以操作对方整个浏览器的行为。这个操作方式可以用于与电视等其它不便于操作的终端上的浏览器操作控制。

Step 5&6.在对方接受连接后,将要分享的页面推送过去。

Step 7&8.根据对方用户接受时的设定,来确定是否保持当前连接或者直接断开。

 如果保持连接,则会不断将本地操作传送到远端,并由远端浏览器执行。

Step 9.如果用户未选择允许操作所有页面则在关闭当前分享页面时自动断开连接。

 如果已选择此项设定,则在浏览器退出时断开连接。

 任何时候,用户都可以使用点击断开连接操作主动断开连接。

 

通讯协议设计

在浏览器内部设计操作记录、编码、解码及执行的功能。用户在一端执行的操作可以被按序列记录下,并按相同的顺序发送到远端,然后由受控方依序解析执行。

    

中间可以使用特定的数据包设计封装起来。比如使用XML定义或以下数据包格式:

 数据头包:

标识(4Bytes,固定为XXXX)

指令ID (4Bytes,为设计的指令表中一项)

指令数据大小(8Bytes,表示后续有多少数据)

支持的最小版本号(4Bytes,表示从哪个版本开始支持这个指令)

保留位(16Bytes,保留一部分数据,供以后扩展使用)

紧随其后的就是指令数据包,由具体的操作指令指定。

这个数据包格式可以供所有的通讯方式所共同使用,也可以供查找、匹配、查询等操作使用。

 

可以使用的指令包括:

   FIND ->查找设备

   INFO ->获取详细信息

   OPEN ->打开URL

   CLSE ->关闭页面

   CLIK ->点击操作

  

多人同时分享的问题

 在需要多人分享的场景下,可以由某个设备使用发起一个群组会话,发起者就是主控设备。其他人可以使用类似上面的方式搜索到该用户,并选择加入该用户发起的会话。这样发起人的分享页面和操作会被自动的发送到其它已加入该组的设备上执行。

   


以下是会话组的操作状态图:

     

 1.当用户发起一个会话组时,即进入创建会话组状态。

 2.输入完组名信息后即进入等待加入状态,或取消以结束会话。

 3.当有其他人加入组后,发起人可以点开始进入同步中状态。开始页面操作。 发起人也可以取消当前会话。

 4.在同步浏览过程中,其他人可以选择离开。发起人也可以选择关闭以结束会话。

 

 

使用场景

       1. 当需要同附近或远程的朋友分享某个页面时,在当前页面选择分享功能,在可用设备/好友列表中找到对方后,就会自动在对方的浏览器中打开相同的页面。

 比如在远程会议中,多人可以通过电话系统交谈,而通过会话组使用浏览器同步浏览指定的内容。

 在小团队活动中,多人同时看一个屏幕不方便,大家就可以自行观看自己的浏览器,而实现同步浏览,更容易增进团队的协作氛围。

 

        2.如果需要带着对方一起浏览,只要对方允许远程操作,就可以实现将本地操作在对方浏览器上同步执行,多括翻页/打开链接等。

比如和远端的朋友或父母分享某个内容时,不需要反复的说明操作方法,体验更加流畅、简洁。


转载请注明出处: http://blog.csdn.net/horkychen



目录
相关文章
|
3月前
|
Go
cypress里浏览器里的相关操作有哪些?
cypress里浏览器里的相关操作有哪些?
|
3天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
9 4
|
10天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
10天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
4月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
Java 测试技术 Python
Selenium帮助你轻松实现浏览器多窗口操作
Selenium帮助你轻松实现浏览器多窗口操作
76 0
|
3月前
|
数据采集 安全 Go
一文看懂 如何操作浏览器访问网页
一文看懂 如何操作浏览器访问网页
33 0
|
3月前
|
测试技术 Python
python使用selenium操作浏览器的教程
python使用selenium操作浏览器的教程
60 1
python使用selenium操作浏览器的教程
|
3月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
24 0

热门文章

最新文章