sdk-sync-socket.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. <style>
  8. html,
  9. body {
  10. width: 100%;
  11. height: 100%;
  12. margin: 0;
  13. overflow: hidden;
  14. }
  15. .scene {
  16. height: 100%;
  17. float: left;
  18. width: 50%;
  19. /* width: 100%; */
  20. height: 100%;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="scene" class="scene"></div>
  26. <div id="scene2" class="scene"></div>
  27. <!-- <script src="./js/socket.io.min.js"></script> -->
  28. <script src="./js/socket.io.min.v4.msgpack.js"></script>
  29. <script src="../dist/sdk/kankan-sdk-deps.js"></script>
  30. <script src="../dist/sdk/kankan-sdk.js"></script>
  31. <script>
  32. function createSocket(config) {
  33. return io('wss://test-socket.4dkankan.com', {
  34. path: '/fsl-node',
  35. query: {
  36. role: config.role,
  37. roomId: 'test-room',
  38. userId: Date.now().toString(),
  39. sceneNum: 't-iltt6PQ',
  40. userLimitNum: 30,
  41. from: 0,
  42. },
  43. })
  44. }
  45. var socket1 = createSocket({ role: 'leader' })
  46. var socket2 = createSocket({ role: 'customer' })
  47. socket1.onAny((event, data) => {
  48. console.log(data)
  49. })
  50. socket2.onAny((event, data) => {
  51. console.log(data)
  52. })
  53. var kankan1 = new KanKan({
  54. dom: '#scene',
  55. num: 't-iltt6PQ',
  56. })
  57. kankan1.render()
  58. var kankan2 = new KanKan({
  59. dom: '#scene2',
  60. num: 't-iltt6PQ',
  61. })
  62. kankan2.render()
  63. kankan1.Connect.sync.on('data', data => {
  64. kankan2.Broadcast.sync.receive(data)
  65. })
  66. kankan1.Connect.sync.start()
  67. kankan2.Connect.sync.on('data', data => {
  68. kankan1.Connect.sync.receive(data)
  69. })
  70. kankan2.Connect.sync.start()
  71. </script>
  72. </body>
  73. </html>