diff --git a/components/Player/Viewer.vue b/components/Player/Viewer.vue index 6a980ea..1daa286 100644 --- a/components/Player/Viewer.vue +++ b/components/Player/Viewer.vue @@ -81,7 +81,7 @@ } }, computed: { - ...mapGetters(['ws', 'userId', 'controllerId', 'portal', 'janusId', 'janusIp', 'apertureWs', 'apertureToken', 'viewerMuted', 'viewerVolume']), + ...mapGetters(['mesa', 'userId', 'controllerId', 'portal', 'janusId', 'janusIp', 'apertureWs', 'apertureToken', 'viewerMuted', 'viewerVolume']), hasControl() { return this.controllerId === this.userId @@ -453,11 +453,14 @@ this.emitEvent({ scrollUp: deltaY > 0 }, 'MOUSE_SCROLL') }, - emitEvent(d, t) { - if (!this.ws || !this.hasControl || this.ws.readyState !== this.ws.OPEN) + emitEvent(data, type) { + if (!this.mesa || !this.hasControl || this.mesa.readyState !== WebSocket.OPEN) return - this.ws.send(JSON.stringify({ op: 0, d, t })) + this.mesa.send({ + opcode: 0, + data, type + }) }, calculatePos(event) { diff --git a/nuxt.config.js b/nuxt.config.js index cb13e2d..d21eb6f 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -3,6 +3,8 @@ import brand from './brand/config' const borealis = process.env.BOREALIS_REPOSITORY ? process.env.BOREALIS_REPOSITORY : '@cryb/borealis' +export const strict = false + const script = [] if (brand.ga_tracking_id) script.push({ diff --git a/package.json b/package.json index b5ef816..bf92f2a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "cookieparser": "^0.1.0", "date-fns": "^2.5.1", "dotenv": "^8.2.0", + "mesa-js-client": "^1.4.4", "node-emoji": "^1.10.0", "nuxt": "^2.8.1", "nuxt-client-init-module": "^0.1.4", diff --git a/store/index.js b/store/index.js index e202355..f7dd6d4 100644 --- a/store/index.js +++ b/store/index.js @@ -1,6 +1,8 @@ import { parse } from 'cookieparser' import cookies from 'browser-cookies' +import Mesa from 'mesa-js-client' + const isProduction = () => process.env.NODE_ENV === 'production' export const getters = { @@ -50,7 +52,7 @@ export const getters = { viewerMuted: ({ viewerMuted }) => viewerMuted, viewerVolume: ({ viewerVolume }) => (viewerVolume/100), - ws: ({ ws }) => ws + mesa: ({ mesa }) => mesa } const initialState = () => ({ @@ -79,10 +81,7 @@ const initialState = () => ({ viewerMuted: false, viewerVolume: 30, - ws: null, - wsHeartbeat: null, - wsReconnect: null, - wsReconnectInterval: 5000 + mesa: null }) export const state = () => initialState() @@ -310,10 +309,16 @@ export const mutations = { * Typing */ setTypingStatus(state, typing) { - if (!state.ws) return - if (state.ws.readyState !== state.ws.OPEN) return + if (!state.mesa && !state.mesa.ws) + return + else if (state.mesa.ws.readyState !== WebSocket.OPEN) + return - state.ws.send(JSON.stringify({ op: 0, d: { typing }, t: 'TYPING_UPDATE' })) + state.mesa.send({ + opcode: 0, + data: { typing }, + type: 'TYPING_UPDATE' + }) }, updateTypingStatus(state, { typing, u: userId }) { @@ -329,12 +334,12 @@ export const mutations = { * Presence */ updatePresence(state, { u: userId, presence }) { - if (userId === state.userId) return + if (userId === state.userId) return - if(presence === 'online' && state.onlineUsers.indexOf(userId) === -1) - state.onlineUsers.push(userId) - else - state.onlineUsers.splice(state.onlineUsers.indexOf(userId), 1) + if(presence === 'online' && state.onlineUsers.indexOf(userId) === -1) + state.onlineUsers.push(userId) + else + state.onlineUsers.splice(state.onlineUsers.indexOf(userId), 1) }, /** @@ -360,99 +365,84 @@ export const mutations = { * WebSocket */ setupWebSocket(state) { - if (!state.token) return - - const { token } = state, ws = new WebSocket(process.env.WS_URL) + console.log(state.token) + if (!state.token) + return - ws.onerror = () => this.commit('setupReconnect') + const { token } = state, mesa = new Mesa(process.env.WS_URL, { autoConnect: false }) - ws.onmessage = ({ data }) => { - let json + mesa.onConnected = async () => { + console.log('connected') - try { - json = JSON.parse(data) - } catch(error) { - console.error(error) - - return console.error(error) - } - - const { op, d, t } = json - - if (op !== 11 && !isProduction()) - console.log(op, d, t) - - if (op === 0) { - if (t.split('_')[0] === 'PORTAL') - return this.commit('updatePortal', d) - switch(t) { - // ROOM - case 'CONTROLLER_UPDATE': - this.commit('updateController', d) - break - case 'QUEUE_UPDATE': - this.commit('updateQueueStatus', d) - break - case'JANUS_CONFIG': - this.commit('updateJanus', d) - break - case 'APERTURE_CONFIG': - this.commit('updateAperture', d) - console.log("Aperture config received.") - break - case 'ROOM_DESTROY': - this.commit('handleRoom', null) - this.app.router.push('/home') - break - case 'INVITE_UPDATE': - this.commit('handleInvite', d) - break - // USER - case 'USER_JOIN': - this.commit('handleUserJoin', d) - break - case 'USER_UPDATE': - this.commit('handleUser', d) - break - case 'USER_LEAVE': - this.commit('handleUserLeave', d) - break - case 'OWNER_UPDATE': - this.commit('handleOwnerUpdate', d) - break - case 'PRESENCE_UPDATE': - this.commit('updatePresence', d) - break - // MESSAGE - case 'MESSAGE_CREATE': - this.commit('pushMessage', d) - break - case 'MESSAGE_DESTROY': - this.commit('pullMessage', d.id) - break - case 'TYPING_UPDATE': - this.commit('updateTypingStatus', d) - break - } - } else if (op === 10) { - const { c_heartbeat_interval, c_reconnect_interval } = d - - this.commit('setupHeartbeat', c_heartbeat_interval) - - if (state.wsReconnect) this.commit('invalidateReconnect') - state.wsReconnectInterval = c_reconnect_interval - - ws.send(JSON.stringify({ op: 2, d: { token } })) - } + await mesa.authenticate({ token }) } - state.ws = ws + mesa.onMessage = (op, d, t) => { + if (op === 0) { + if (t.split('_')[0] === 'PORTAL') + return this.commit('updatePortal', d) + + switch(t) { + // ROOM + case 'CONTROLLER_UPDATE': + this.commit('updateController', d) + break + case 'QUEUE_UPDATE': + this.commit('updateQueueStatus', d) + break + case'JANUS_CONFIG': + this.commit('updateJanus', d) + break + case 'APERTURE_CONFIG': + this.commit('updateAperture', d) + console.log("Aperture config received.") + break + case 'ROOM_DESTROY': + this.commit('handleRoom', null) + this.app.router.push('/home') + break + case 'INVITE_UPDATE': + this.commit('handleInvite', d) + break + // USER + case 'USER_JOIN': + this.commit('handleUserJoin', d) + break + case 'USER_UPDATE': + this.commit('handleUser', d) + break + case 'USER_LEAVE': + this.commit('handleUserLeave', d) + break + case 'OWNER_UPDATE': + this.commit('handleOwnerUpdate', d) + break + case 'PRESENCE_UPDATE': + this.commit('updatePresence', d) + break + // MESSAGE + case 'MESSAGE_CREATE': + this.commit('pushMessage', d) + break + case 'MESSAGE_DESTROY': + this.commit('pullMessage', d.id) + break + case 'TYPING_UPDATE': + this.commit('updateTypingStatus', d) + break + } + } + } + + mesa.connect() + + state.mesa = mesa }, disconnectWebSocket(state) { - if (state.ws) { - state.ws.close(1000) - state.ws = null + if (state.mesa) { + state.mesa.disconnect(1000) + state.mesa = null } if (state.portal) @@ -460,49 +450,10 @@ export const mutations = { if (state.controllerId) state.controllerId = null - - if (state.wsHeartbeat) - this.commit('invalidateHeartbeat') - - if (state.wsReconnect) - this.commit('invalidateReconnect') - }, - - setupHeartbeat(state, interval) { - state.wsHeartbeat = setInterval(() => { - if (!state.ws) return this.commit('invalidateHeartbeat') - if (state.ws.readyState !== state.ws.OPEN) return this.commit('invalidateHeartbeat') - - state.ws.send(JSON.stringify({ op: 1, d: {} })) - }, interval) - }, - - invalidateHeartbeat(state) { - if (!state.wsHeartbeat) return - - clearInterval(state.wsHeartbeat) - state.wsHeartbeat = null - }, - - setupReconnect(state) { - state.wsReconnect = setInterval(() => { - if (state.ws) - if (state.ws.readyState === state.ws.OPEN) - return this.commit('invalidateReconnect') - - this.commit('setupWebSocket') - }, state.wsReconnectInterval) - }, - - invalidateReconnect(state) { - if (!state.wsReconnect) return - - clearInterval(state.wsReconnect) - state.wsReconnect = null }, logout(_state) { - if (_state.ws) + if (_state.mesa) this.commit('disconnectWebSocket') const state = initialState(), SAFE_KEYS = [] diff --git a/yarn.lock b/yarn.lock index 06ee70b..b98f84d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1575,6 +1575,11 @@ binary-extensions@^2.0.0: resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c" integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow== +binaryextensions@2: + version "2.3.0" + resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22" + integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg== + bindings@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df" @@ -2769,6 +2774,11 @@ duplexify@^3.4.2, duplexify@^3.6.0: readable-stream "^2.0.0" stream-shift "^1.0.0" +editions@^1.3.3: + version "1.3.4" + resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b" + integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg== + ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -2895,7 +2905,7 @@ escape-html@~1.0.3: resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= -escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= @@ -3472,6 +3482,20 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423" integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ== +gulp-rename@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-2.0.0.tgz#9bbc3962b0c0f52fc67cd5eaff6c223ec5b9cf6c" + integrity sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ== + +gulp-replace@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gulp-replace/-/gulp-replace-1.0.0.tgz#b32bd61654d97b8d78430a67b3e8ce067b7c9143" + integrity sha512-lgdmrFSI1SdhNMXZQbrC75MOl1UjYWlOWNbNRnz+F/KHmgxt3l6XstBoAYIdadwETFyG/6i+vWUSCawdC3pqOw== + dependencies: + istextorbinary "2.2.1" + readable-stream "^2.0.1" + replacestream "^4.0.0" + gzip-size@^5.0.0: version "5.1.1" resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274" @@ -4139,6 +4163,15 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= +istextorbinary@2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53" + integrity sha512-TS+hoFl8Z5FAFMK38nhBkdLt44CclNRgDHWeMgsV8ko3nDlr/9UI2Sf839sW7enijf8oKsZYXRvM8g0it9Zmcw== + dependencies: + binaryextensions "2" + editions "^1.3.3" + textextensions "2" + jest-worker@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5" @@ -4512,6 +4545,14 @@ merge-stream@^2.0.0: resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== +mesa-js-client@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/mesa-js-client/-/mesa-js-client-1.4.4.tgz#5341d3acb05bb4910f2cef4b5984c3c5b16699c7" + integrity sha512-ojpB6NL7GSvlMVfepdRXQc4deO85grE2w/K97PxLUjIGltOOOn3iqTrH2IZW9iDOCj4PhWuXe6VlA5zC3YRZPw== + dependencies: + gulp-rename "^2.0.0" + gulp-replace "^1.0.0" + methods@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" @@ -6187,6 +6228,15 @@ repeat-string@^1.6.1: resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc= +replacestream@^4.0.0: + version "4.0.3" + resolved "https://registry.yarnpkg.com/replacestream/-/replacestream-4.0.3.tgz#3ee5798092be364b1cdb1484308492cb3dff2f36" + integrity sha512-AC0FiLS352pBBiZhd4VXB1Ab/lh0lEgpP+GGvZqbQh8a5cmXVoTe5EX/YeTFArnp4SRGTHh1qCHu9lGs1qG8sA== + dependencies: + escape-string-regexp "^1.0.3" + object-assign "^4.0.1" + readable-stream "^2.0.2" + requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" @@ -6920,6 +6970,11 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= +textextensions@2: + version "2.6.0" + resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4" + integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ== + thread-loader@^2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/thread-loader/-/thread-loader-2.1.3.tgz#cbd2c139fc2b2de6e9d28f62286ab770c1acbdda"