实现Tab页之间通信的方式

5 种方式：

1. localstorage
2. webworker
3. web-socket
4. cookie
5. postMessage

localstorage

先看效果：

test3.gif

代码：

    
    
    
    
    



    Click me.
    

webWorker

先看效果：

test1.gif

看代码：

    
    
    
    
    



    send
    get
    

//work.js
let data1 = '';
this.onconnect = function(e) {
    console.log('e', e);
    let port = e.ports[0];
    port.onmessage = function(e) {
        if(e.data === 'get') {
            port.postMessage(data1)
        }else {
            data1 = e.data
        }
    }
}

web-socket

先看效果：

test0.gif

客户端代码(web)

    
    
    
    
    



    send
    get
    

服务端代码（koa）

const Koa = require('koa');
const serve = require('koa-static')
const path = require('path')
const Router = require('koa-router');

const websocket = require('koa-websocket')

const home = serve(path.resolve(__dirname, './'))

const app = websocket(new Koa());


let ctxs = new Set();//保证websocket唯一性
app.ws.use(function(ctx, next) {
    ctxs.add(ctx);
    ctx.websocket.on('message', function(message) {
        ctxs.forEach((item, index , arr) => {//客户端每新建一个websokcet就会保存到这个ctx中，每个ctx中的websokcet是独立的
            item.websocket.send(message)
        })
    });
    ctx.websocket.on('close', function(message) {
        ctxs.delete(ctx)
    })
    next(ctx)
} )




const router = new Router()
router.get('*', (ctx, next) => {
    ctx.body = 'hello world';
})


app.use(home)

app.use(router.routes())
    .use(router.allowedMethods());


app.listen(3009, () => {
    console.log('server is started at port 3009')
})

cookie

这个简单就不讲了

postMessage

这个其实有点限制，就是你必须拿到目标窗口的引用，否则是通信不了的， 先看效果：

test4.gif

先用koa起2个服务(端口号设置不一样就行)，分别放置2个index.html.

    
    
    
    
    



    send
    get
    

    
    
    
    
    



    send
    get
    

参考文献

https://www.cnblogs.com/lovling/p/7440360.html
https://blog.csdn.net/u014465934/article/details/98869766