openvidu 리덕스에 새롭게 추가

기존의 room logic이 완성이 된 후, 이를 openvidu logic을 병합하는 시도를 하였다. 생각보다 페이지 이동이 많아, openvidu를 redux에 다시 넣을 필요성이 있다고 판단하였다. 예전에 한번 시도하다가 실패한 경험이 있어서 될까 말까 걱정했는데 다행히 성공적으로 병합이 완료되었다.

// ov-slice
import { createSlice } from '@reduxjs/toolkit'

import { OpenVidu } from 'openvidu-browser'

const ovSlice = createSlice({
  name: 'openvidu',
  initialState: {
    OV: null,
    mySessionId: undefined,
    myUserName: undefined,
    session: undefined,
    mainStreamManager: undefined,
    publisher: undefined,
    subscribers: [],
    devices: undefined,
    currentVideoDevice: undefined,
  },
  reducers: {
    createOpenvidu: (state, { payload }) => {
      if (!state.OV) {
        state.myUserName = payload.nickname
        state.mySessionId = payload.roomId
        state.OV = new OpenVidu()
        state.session = state.OV.initSession()
        state.devices = state.OV.getDevices()
      }
    },

    createPublisher: (state, { payload }) => {
      state.session.publish(payload.publisher)
      state.currentVideoDevice = payload.currentVideoDevice
      state.mainStreamManager = payload.publisher
      state.publisher = payload.publisher
    },

    enteredSubscriber: (state, action) => {
      const subscriber = state.session.subscribe(action.payload, undefined)
      state.subscribers.push(subscriber)
    },

    deleteSubscriber: (state, action) => {
      let index = state.subscribers.indexOf(action.payload, 0)
      if (index > -1) {
        state.subscribers.splice(index, 1)
      }
    },

    leaveSession(state, { payload }) {
      const mySession = state.session
      if (mySession) {
        mySession.disconnect()
      }

      state.OV = null
      state.session = undefined
      state.subscribers = []
      state.mySessionId = undefined
      state.myUserName = undefined
      state.mainStreamManager = undefined
      state.publisher = undefined
      state.devices = undefined
      state.currentVideoDevice = undefined

      // return payload
    },
  },
})

export const ovActions = ovSlice.actions
export default ovSlice

// ovServer.js
// ov-server에 요청하는 토큰 및 세션 생성과정은 외부 모듈로 뺐다.
// SERVER_SIDE
import axios from 'axios'

const OPENVIDU_SERVER_URL = 'https://localhost:4443'
const OPENVIDU_SERVER_SECRET = 'HELLO_WORLD'

// const OPENVIDU_SERVER_URL = 'https://helloworld.ssafy.io:8443'
// const OPENVIDU_SERVER_SECRET = 'wndlfdP1051'

export async function getToken(mySessionId) {
  const sessionId = await createSession(mySessionId)
  const token = await createToken(sessionId)
  return token
}

function createSession(sessionId) {
  return new Promise(async (resolve, reject) => {
    let data = { customSessionId: sessionId }
    try {
      const response = await axios.post(
        OPENVIDU_SERVER_URL + '/openvidu/api/sessions',
        data,
        {
          headers: {
            Authorization:
              'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
            'Content-Type': 'application/json',
          },
          withCredentials: false,
        },
      )

      // 에러 처리 (초기 요청이 제대로 안이루어지는 경우가 있다. 클라이언트 사이드를 통하)
      setTimeout(() => {
        console.log('개발자 설정을 통한 강제 리턴')
        console.log(sessionId)
        return resolve(sessionId)
      }, 1000)
      console.log(response)
      return response.data.id
    } catch (response) {
      console.log(response)
      let error = Object.assign({}, response)
      if (error?.response?.status === 409) {
        return resolve(sessionId)
      }
    }
  })
}

function createToken(sessionId) {
  return new Promise(async (resolve, reject) => {
    var data = {}
    try {
      const response = await axios.post(
        OPENVIDU_SERVER_URL +
          '/openvidu/api/sessions/' +
          sessionId +
          '/connection',
        data,
        {
          headers: {
            Authorization:
              'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
            'Content-Type': 'application/json',
          },
          withCredentials: false,
        },
      )
      return resolve(response.data.token)
    } catch (error) {
      return reject(error)
    }
  })
}