+ Host

[cinwell website](same_screen_leader.html ':include :type=iframe width=100% height=400px')

+ Customer

[cinwell website](same_screen_customer.html ':include :type=iframe width=100% height=400px')

<style>
    iframe{
        border:none
    }
</style>

+ Sample code from the Host's side

```javascript
function createSocket(config) {
    return io('wss://test-socket.4dkankan.com', {
        path: '/fsl-node',
        query: {
            role: config.role,
            roomId: 'test-room',
            userId: Date.now().toString(),
            sceneNum: 't-iltt6PQ',
            userLimitNum: 30,
            from: 0,
        },
    })
}

var socket1 = createSocket({ role: 'leader' })
var kankan1 = new KanKan({
    dom: '#scene',
    num: 't-iltt6PQ',
})
kankan1.render()

socket1.onAny((event, data) => {
    if(event == 'webSyncAction'){
        kankan1.Broadcast.SameScreen.receive(data)
    }
})

kankan1.Broadcast.SameScreen.on('data', data => {
    socket1.emit('webSyncAction',data)
})
kankan1.Broadcast.SameScreen.start()
```

+ Sample code from customer's side

```javascript
function createSocket(config) {
    return io('wss://test-socket.4dkankan.com', {
        path: '/fsl-node',
        query: {
            role: config.role,
            roomId: 'test-room',
            userId: Date.now().toString(),
            sceneNum: 't-YhBCzQr',
            userLimitNum: 30,
            from: 0,
        },
    })
}

var socket1 = createSocket({ role: 'customer' })


var kankan1 = new KanKan({
    dom: '#scene',
    num: 't-YhBCzQr',
})
kankan1.render()

socket1.onAny((event, data) => {
    if(event == 'webSyncAction'){
        kankan1.Broadcast.SameScreen.receive(data)
    }
})

kankan1.Broadcast.SameScreen.on('data', data => {
    socket1.emit('webSyncAction',data)
})
kankan1.Broadcast.SameScreen.start()
```