working rtc connection

2020-07-28 20:31:15 +02:00
parent c1787cacba
commit 927fa2d1a2
11 changed files with 208 additions and 79 deletions
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
-# oozik 2
+# voozik

 Webapp edition

 socket messages types: serverInfos, login, leave, userList, createRoom, connectRoom, offer, answer, candidate
+data types: status, vote
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -4,6 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
--- a/client/src/store/appModule.js
+++ b/client/src/store/appModule.js
@@ -32,6 +32,11 @@ const actions = {
  createRoom ({ commit, dispatch }, code) {
    commit('CREATE_ROOM')
    dispatch('room/setRoomCode', code, { root: true })
+    dispatch('room/setAdmin', null, { root: true })
+  },
+  connectRoom ({ commit, dispatch }, name) {
+    commit('CONNECT_ROOM')
+    dispatch('rtc/makeOffer', name, { root: true })
  },
  error ({ commit }, error) {
    commit('ERROR', error)
@@ -56,8 +61,9 @@ const mutations = {
    state.serverStatus = serverStatus
  },
  CREATE_ROOM (state) {
-    state.room = true
-    state.admin = true
+    router.push({ name: 'Room' })
+  },
+  CONNECT_ROOM (state) {
    router.push({ name: 'Room' })
  },
  ERROR (state, error) {
--- a/client/src/store/roomModule.js
+++ b/client/src/store/roomModule.js
@@ -9,8 +9,6 @@ const state = {
 }

 const getters = {
-  displayRoomCode: state => state.roomCode,
-  displayRoomName: state => state.roomName
 }

 const actions = {
@@ -22,6 +20,9 @@ const actions = {
  },
  setRoomStatus ({ commit }, roomStatus) {
    commit('SET_ROOMSTATUS', roomStatus)
+  },
+  setAdmin ({ commit }) {
+    commit('SET_ADMIN')
  }
 }

@@ -34,6 +35,12 @@ const mutations = {
  },
  SET_ROOMSTATUS (state, roomStatus) {
    state.roomStatus = roomStatus
+  },
+  SET_ADMIN (state) {
+    state.admin = true
+  },
+  BROADCAST_ROOMSTATUS (state) {
+
  }
 }

--- a/client/src/store/rtcModule.js
+++ b/client/src/store/rtcModule.js
@@ -1,4 +1,7 @@
 import { send } from './signalPlugin'
+import store from './index'
+
+var lastPeer // horrible

 const configuration = {
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
@@ -6,7 +9,7 @@ const configuration = {

 const state = {
  name: null,
-  connections: new Map()
+  peers: []
 }

 const getters = {
@@ -17,15 +20,21 @@ const actions = {
  setName ({ commit }, name) {
    commit('SET_NAME', name)
  },
-  async offer ({ commit }, offer, name) {
-    commit('CREATE_PEER_CONNECTION', name)
-    commit('ANSWER', name, offer)
+  async makeOffer ({ commit }, targetName) {
+    commit('CREATE_PEER_CONNECTION', targetName)
+    commit('OFFER', targetName)
  },
-  answer ({ commit }, answer, name) {
-    commit('OFFER', name, answer)
+  async offer ({ commit }, { offer, senderName }) {
+    console.log('offer from ' + senderName)
+    commit('CREATE_PEER_CONNECTION', senderName)
+    commit('ANSWER', { target: senderName, offer: offer })
  },
-  candidate ({ commit }, candidate, name) {
-    commit('ANSWER', name, candidate)
+  answer ({ commit }, { answer, senderName }) {
+    console.log('answer from ' + senderName)
+    commit('FINALIZE', { target: senderName, answer: answer })
+  },
+  candidate ({ commit }, { candidate, senderName }) {
+    commit('CANDIDATE', { target: senderName, candidate: candidate })
  },
  leave ({ commit }) {
    commit('LEAVE')
@@ -40,78 +49,105 @@ const mutations = {
    state.name = name
  },
  CREATE_PEER_CONNECTION (state, target) {
-    console.log('CREATED PEER CONNECTION')
-    var connection = new RTCPeerConnection(configuration)
-    state.connections[target] = connection
+    console.log('[RTC] create peer connection with ' + target)
+    var peer = {
+      name: target,
+      connection: new RTCPeerConnection(configuration),
+      dataChannel: null
+    }

-    connection.onicecandidate = function (event) {
+    state.peers.push(peer)
+
+    peer.connection.onicecandidate = function (event) {
      if (event.candidate) {
        send({
          type: 'candidate',
-          name: name,
+          name: state.name,
          target: target,
-          candidate: event.candidate
+          data: event.candidate
        })
      }
    }

-    connection.onnegotiationneeded = function () { handleNegotiationNeededEvent(target) }
-    connection.onsignalingstatechange = function () { handleSignalingStateChangeEvent(connection) }
-    connection.oniceconnectionstatechange = function () { handleICEConnectionStateChangeEvent(connection) }
-    connection.onicegatheringstatechange = function () { handleICEGatheringStateChangeEvent(connection) }
+    peer.connection.onnegotiationneeded = function () { handleNegotiationNeededEvent(target) }
+    peer.connection.onsignalingstatechange = function () { handleSignalingStateChangeEvent(peer.connection) }
+    peer.connection.oniceconnectionstatechange = function () { handleICEConnectionStateChangeEvent(peer.connection) }
+    peer.connection.onicegatheringstatechange = function () { handleICEGatheringStateChangeEvent(peer.connection) }
  },
-  CREATE_DATA_CHANNEL (state) {
+  async OFFER (state, target) {
+    console.log('[RTC] make offer to ' + target)
+    var peer = state.peers.find(peer => peer.name === target)

+    peer.dataChannel = peer.connection.createDataChannel('dataChannel')
+    peer.dataChannel.onopen = handleDataChannelStateChangeEvent
+    peer.dataChannel.onclose = handleDataChannelStateChangeEvent
+
+    var offer = await peer.connection.createOffer()
+    send({
+      type: 'offer',
+      name: state.name,
+      target: target,
+      data: offer
+    })
+    await peer.connection.setLocalDescription(offer)
  },
-  ANSWER (state, target, offer) {
-    var connection = state.connections[target]
+  async ANSWER (state, { target, offer }) {
+    console.log('[RTC] answer to ' + target)
+    var peer = state.peers.find(peer => peer.name === target)

-    connection.setRemoteDescription(new RTCSessionDescription(offer))
+    // Permet d'associer le datachannel de la callback au bon peer
+    lastPeer = peer

-    var answer = connection.createAnswer()
+    peer.connection.ondatachannel = handleDataChannelCallback

-    connection.setLocalDescription(answer)
+    await peer.connection.setRemoteDescription(new RTCSessionDescription(offer))
+
+    var answer = await peer.connection.createAnswer()
+
+    await peer.connection.setLocalDescription(answer)

    send({
      type: 'answer',
-      name: name,
+      name: state.name,
      target: target,
-      answer: answer
+      data: answer
    })
  },
-  OFFER (state, target, answer) {
-    var connection = state.connections[target]
-    connection.setRemoteDescription(new RTCSessionDescription(answer))
+  FINALIZE (state, { target, answer }) {
+    var peer = state.peers.find(peer => peer.name === target)
+    peer.connection.setRemoteDescription(new RTCSessionDescription(answer))
  },
-  CANDIDATE (state, target, candidate) {
-    var connection = state.connections[target]
-    connection.addIceCandidate(new RTCIceCandidate(candidate))
+  CANDIDATE (state, { target, candidate }) {
+    var peer = state.peers.find(peer => peer.name === target)
+    peer.connection.addIceCandidate(new RTCIceCandidate(candidate))
  },
  LEAVE (state) {
-    state.connections.forEach((connection) => {
-      connection.close()
-      connection = null
+    state.peers.forEach((peer) => {
+      peer.connection.close()
    })
-    state.connections = new Map()
+    state.peers = {}
  },
  BROADCAST (state, message) {
+    state.peers.forEach(peer => {
+      peer.dataChannel.send(message)
+    })
  }
 }

 function handleICEConnectionStateChangeEvent (connection) {
-  console.log('ICE CONNECTION CHANGE ' + connection.iceConnectionState)
+  console.log('[RTC] ice connection change to ' + connection.iceConnectionState)
 }

 function handleICEGatheringStateChangeEvent (connection) {
-  console.log('ICE GATHERING CHANGE ' + connection.iceGatheringState)
+  console.log('[RTC] ice gathering change to ' + connection.iceGatheringState)
 }

 async function handleNegotiationNeededEvent (target) {
-  console.log('NEGOTIATION NEEDED FROM ' + target)
+  console.log('[RTC] negotiation needed from ' + target)
 }

 async function handleSignalingStateChangeEvent (connection) {
-  console.log('STATE CHANGED TO : ' + connection.signalingState)
+  console.log('[RTC] state changed to ' + connection.signalingState)
  switch (connection.signalingState) {
    case 'closed':
      await connection.close()
@@ -119,6 +155,33 @@ async function handleSignalingStateChangeEvent (connection) {
  }
 }

+function handleDataChannelStateChangeEvent () {
+  console.log('[RTC] data channel state change')
+}
+
+function handleDataChannelCallback (event) {
+  console.log('[RTC] data channel callback ' + event)
+  var peer = lastPeer
+  peer.dataChannel = event.channel
+  peer.dataChannel.onmessage = handleDataChannelMessage
+  peer.dataChannel.onopen = handleDataChannelStateChangeEvent
+  peer.dataChannel.onclose = handleDataChannelStateChangeEvent
+
+  store.dispatch('rtc/broadcast', store.state.room.roomStatus)
+}
+
+function handleDataChannelMessage (event) {
+  console.log('[RTC] data channel message ' + event.data)
+  var data = event.data
+  switch (data.type) {
+    case 'status':
+      store.dispatch('room/setRoomStatus', data.message)
+      break
+    case 'vote':
+      break
+  }
+}
+
 export default {
  namespaced: true,
  state,
--- a/client/src/store/signalPlugin.js
+++ b/client/src/store/signalPlugin.js
@@ -4,31 +4,33 @@ const connection = new WebSocket('ws://localhost:8181/socket')
 export default function createSignalPlugin () {
  return store => {
    connection.onopen = function () {
-      console.log('WS connected')
+      console.log('[WS] connected')
      store.dispatch('app/signalConnected')
    }

    connection.onerror = function (error) {
-      console.log('WS error ' + error)
+      console.log('[WS] error ' + error)
      store.dispatch('app/signalError', error)
    }

    connection.onmessage = function (message) {
-      console.log('WS message', message.data)
+      console.log('[WS] message', message.data)

      var data = JSON.parse(message.data)

      switch (data.type) {
        case 'offer':
-          store.dispatch('rtc/offer', data.offer, data.name)
+          console.log('offer from ' + data.name)
+          store.dispatch('rtc/offer', { offer: data.data, senderName: data.name })
          break

        case 'answer':
-          store.dispatch('rtc/answer', data.answer, data.name)
+          console.log('answer from ' + data.name)
+          store.dispatch('rtc/answer', { answer: data.data, senderName: data.name })
          break

        case 'candidate':
-          store.dispatch('rtc/candidate', data.candidate, data.name)
+          store.dispatch('rtc/candidate', { candidate: data.data, senderName: data.name })
          break

        case 'leave':
@@ -47,6 +49,10 @@ export default function createSignalPlugin () {
          store.dispatch('app/createRoom', data.message)
          break

+        case 'connectRoom':
+          store.dispatch('app/connectRoom', data.message)
+          break
+
        case 'error':
          store.dispatch('app/error', data.message)
          break
@@ -59,6 +65,6 @@ export default function createSignalPlugin () {
 }

 export function send (message) {
-  console.log('WS send', message)
+  console.log('[WS] send', message)
  connection.send(JSON.stringify(message))
 }
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -33,6 +33,7 @@ export default {
      this.$buefy.dialog.prompt({
        message: 'Choose a name',
        trapFocus: true,
+        canCancel: false,
        inputAttrs: {
          placeholder: 'pedro',
          minlength: 3,
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -1,29 +1,51 @@
 <template>
  <div class="room container">
    <h1 class="title is-1">{{roomStatus.roomName}}</h1>
-    <h1 class="subtitle is-4">{{roomStatus.roomCode}}</h1>
    <h2 class="subtitle">{{roomStatus.current.title}}</h2>

-    <b-table :data="roomStatus.playlist" striped hoverable default-sort="vote">
-      <template slot-scope="props">
-        <b-table-column field="title">
-          {{props.row.title}}
-        </b-table-column>
+    <b-tabs>
+      <b-tab-item label="Playlist">
+        <b-table :data="roomStatus.playlist" striped hoverable default-sort="vote">
+          <template slot-scope="props">
+            <b-table-column field="title" label="Title">
+              {{props.row.title}}
+            </b-table-column>

-        <b-table-column field="link">
-          {{props.row.link}}
-        </b-table-column>
+            <b-table-column field="link" label="Link">
+              {{props.row.link}}
+            </b-table-column>

-        <b-table-column field="vote">
-          {{props.row.vote}}
-        </b-table-column>
+            <b-table-column field="vote" label="Votes">
+              {{props.row.vote}}
+            </b-table-column>

-        <b-table-column>
-          <b-button icon-left="arrow-up-bold-outline" type="is-dark"/>
-          <b-button icon-left="arrow-down-bold-outline" type="is-dark"/>
-        </b-table-column>
-      </template>
-    </b-table>
+            <b-table-column>
+              <b-button icon-left="arrow-up-bold-outline" type="is-dark"/>
+              <b-button icon-left="arrow-down-bold-outline" type="is-dark"/>
+            </b-table-column>
+          </template>
+        </b-table>
+      </b-tab-item>
+
+      <b-tab-item label="Admin" :visible="showAdmin">
+        <b-table :data="usersList" striped hoverable>
+          <template slot-scope="props">
+            <b-table-column field="name" label="Name">
+              {{props.row.name}}
+            </b-table-column>
+
+            <b-table-column>
+              <b-button icon-left="karate" type="is-dark"/>
+            </b-table-column>
+          </template>
+        </b-table>
+      </b-tab-item>
+
+      <b-tab-item label="Invite">
+        <h1 class="subtitle">{{roomStatus.roomCode}}</h1>
+      </b-tab-item>
+
+    </b-tabs>
  </div>
 </template>

@@ -33,7 +55,20 @@ export default {
  computed: {
    roomStatus () {
      return this.$store.state.room.roomStatus
+    },
+    showAdmin () {
+      return this.$store.state.room.admin
+    },
+    usersList () {
+      console.log('USER LIST ' + this.$store.state.rtc.peers)
+      return this.$store.state.rtc.peers
+    },
+    isLoggedIn () {
+      return this.$store.state.app.loginSuccess
    }
+  },
+  mounted () {
+    if (!this.isLoggedIn) this.$router.push({ name: 'Home' })
  }
 }
 </script>
--- a/server/src/main/java/gltronic/oozik/business/IRoomManager.java
+++ b/server/src/main/java/gltronic/oozik/business/IRoomManager.java
@@ -2,7 +2,7 @@ package gltronic.oozik.business;

 import java.io.IOException;

-import org.json.JSONObject;
+import org.springframework.web.socket.TextMessage;
 import org.springframework.web.socket.WebSocketSession;

 public interface IRoomManager {
@@ -10,7 +10,7 @@ public interface IRoomManager {
  public void leave(WebSocketSession session);
  public void createRoom(WebSocketSession session) throws InterruptedException, IOException;
  public void connectRoom(WebSocketSession session, String roomName) throws InterruptedException, IOException;
-  public void followRTC(WebSocketSession session, JSONObject jsonObject) throws InterruptedException, IOException;
+  public void followRTC(WebSocketSession session, TextMessage message) throws InterruptedException, IOException;
  public void sendMessage(WebSocketSession session, String type, String message) throws InterruptedException, IOException;
  public void sendServerInfos(WebSocketSession session) throws InterruptedException, IOException;
 }
--- a/server/src/main/java/gltronic/oozik/business/RoomManager.java
+++ b/server/src/main/java/gltronic/oozik/business/RoomManager.java
@@ -74,14 +74,17 @@ public class RoomManager implements IRoomManager{
      return;
    }

-    String roomAdmin = rooms.getKey(roomName);
-    sendMessage(session, "coonectRoom", roomAdmin);
+    String roomAdmin = rooms.get(roomName);
+    sendMessage(session, "connectRoom", roomAdmin);
+
+    String userName = users.getKey(session);
+    System.err.println("[ROOM] Connection to room "+roomName+" ("+roomAdmin+") by "+userName);
  }

-  public void followRTC(WebSocketSession session, JSONObject jsonObject) throws InterruptedException, IOException {
+  public void followRTC(WebSocketSession session, TextMessage message) throws InterruptedException, IOException {
+    String payload = message.getPayload();
+    JSONObject jsonObject = new JSONObject(payload);
    String target = (String) jsonObject.get("target");
-    String type = (String) jsonObject.get("type");
-    String data = (String) jsonObject.get("data");

    if (target == null) {
      sendMessage(session, "error", "no target");
@@ -96,7 +99,11 @@ public class RoomManager implements IRoomManager{
    }

    System.err.println("[ROOM] Foward RTC");
-    sendMessage(targetSession, type, data);
+    followMessage(targetSession, message);
+  }
+
+  public void followMessage (WebSocketSession session, TextMessage message) throws IOException {
+    session.sendMessage(message);
  }

  public void sendMessage(WebSocketSession session, String type, String message) throws InterruptedException, IOException {
--- a/server/src/main/java/gltronic/oozik/web/SocketHandler.java
+++ b/server/src/main/java/gltronic/oozik/web/SocketHandler.java
@@ -43,10 +43,12 @@ public class SocketHandler extends TextWebSocketHandler {
        break;
      case "leave":
        roomManager.leave(session);
+        break;
      case "offer":
      case "answer": 
      case "candidate":
-        roomManager.followRTC(session, jsonObject);
+        roomManager.followRTC(session, message);
+        break;
      default:
        roomManager.sendMessage(session, "error", "unknow command");
    }