Skyline (6.x)-web Two-time development-multi-window comparison

Get source code on GitHub 1. Open a 3D window

One page loads multiple Terraexplorer3dwindow and sgworld, etc. only the first can be used (i.e. the use of an IFRAME is the same)
So I decided to open two new pages for a multi-window comparison, and then I opened two new pages using window.open on the main page. But these two new pages use Sgworld when actually on the main page (use window.open page) produced the effect, feel and the previous page loaded multiple Terraexplorer3dwindow and Sgworld effect the same!!!

Then, after testing, you can load the three-dimensional map normally by closing the new page on the main page. As you can see, the main page and the new page are associated when using window.open, and I've tried many ways to break this association, and finally decide to open a new page with more than one page, and then turn off the stupid method of the main page.

When using Window.close the current close window, actually did not close, I found a search the line before the closure of the codewindow.opener=null

The opener property is a readable, writable property that returns a reference to the Window object that created it.
The opener property is useful for creating a window that can reference properties and functions defined by the window that created it.

The way to disconnect the main page and new pages is found!!!

Summarize:
Open two windows with window.open, then set Window.opener to NULL so you can open the three-dimensional scene in a different window.

Correction:
Test it again today. Setting Window.opener to NULL does not work, or use the main page to turn off this method =_=

2. Multiple 3D Windows synchronization

Tested using the HTTP protocol for Multi-window linkage through the Web server (modify the server's browser location data when the page camera parameters change, all pages get camera parameters every time, When the acquired camera parameters and the current three-dimensional scene camera parameters change more than the threshold to update the current three-dimensional scene camera parameters, in the condition of every 500ms synchronization in less than a minute IE browser receives or sends an HTTP request in the event of a problem. Then through the investigation data using long connection (WebSocket) technology can handle this high-frequency access and multi-client communication requests. It takes only three steps to complete this function with WebSocket:

1. Changes to the client camera parameters are sent to the server,
2. When the server receives the request, it sends the current coordinates to the other clients.
3. The camera parameters are updated after the client receives the message.

node. JS Back-end code

var express = require(‘express‘);var http = require(‘http‘);var WebSocket = require(‘ws‘);var fs = require(‘fs‘);var app = express();var server = http.createServer(app);var wss = new WebSocket.Server({server});wss.on(‘connection‘, function connection(ws) {// 创建连接  console.log(‘链接成功！‘);  ws.on(‘message‘, function incoming(data) {// 接收消息    wss.clients.forEach(function each(client) {      /*        给全部客户端（创建连接的客户端）中        除了发送者客户端（本次发送给服务器消息的客户端）的其他客户端发送消息      */      if (client != ws) {client.send(data)}    });  });});// 启动WebSocketserver.listen(18848, function listening() {  console.log(‘服务器启动成功！‘);});

Front-end main JS code:

import update_pos from ‘./update_pos‘export default function(){  // ws  this.wsServer = new WebSocket(this.ws_url);  this.wsServer.onopen = function (e) {    (typeof e == ‘string‘) && this.send(e);//向后台发送数据  };  this.wsServer.onclose = function (e) {//当链接关闭的时候触发  };  this.wsServer.onmessage = function (e) {//后台返回消息的时候触发    // console.log(‘get_sync_info‘)    // console.log(data)    var sync_info = JSON.parse(e.data).sync_info    var pos_arr = sync_info.pos    var pos = SGWorld.Creator.CreatePosition(pos_arr[0], pos_arr[1], pos_arr[2], pos_arr[3], pos_arr[4], pos_arr[5]);    SGWorld.Navigate.SetPosition(pos);  };  this.wsServer.onerror = function (e) {//错误情况触发  }  // 定时更新位置  this.last_pos = {};  this.sync_interval = setInterval(update_pos.bind(this), this.interval)}

Skyline (6.x)-web Two-time development-multi-window comparison