Basic dashboard done

Author: lpradovera

env.example

@@ -0,0 +1,3 @@
+SIGNALWIRE_PROJECT_KEY=YOUR-PROJECT-KEY
+SIGNALWIRE_TOKEN=YOUR-TOKEN
+SIGNALWIRE_SPACE=YOURSPACE.signalwire.com

index.js

@@ -15,42 +15,10 @@ var cors = require('cors')
 app.use(cors());
 const axios = require('axios');
 
-// SSE for alerts
-var SSE = require('express-sse');
-var sse = new SSE(['SignalWire SSE started']);
-app.get('/stream', (req, res, next) => {
-  res.flush = () => {}; 
-  next();
-}, sse.init);
-
-// SignalWire real time events
-const createClient = require('@signalwire/realtime-api').createClient;
-createClient({
-  project: process.env.SIGNALWIRE_PROJECT_KEY,
-  token: process.env.SIGNALWIRE_TOKEN
-}).then(async (client) => {
-  client.video.on('room.started', async (roomSession) => {
-    console.log("Room started", await roomSession.getMembers())
-    await sse.send("Room started");
-  
-    roomSession.on('member.joined', async (member) => {
-      console.log('Joined', member.id, member.name)
-    })
-
-    roomSession.on('member.left', async (member) => {
-      console.log('Left', member.id, member.name)
-    })
-  
-    await roomSession.subscribe()
-  });
-
-  client.connect()
-});
-
-
-
+// Utility methods
 async function apiRequest(path, data = {}, method = 'post') {
   var url = `https://${process.env.SIGNALWIRE_SPACE}${path}`
+  console.log(url)
   const res = await axios({
     method,
     url,
@@ -115,6 +83,46 @@ async function getActiveRooms() {
   return output;
 }
 
+// SSE for alerts
+var SSE = require('express-sse');
+var sse = new SSE(['SignalWire SSE started']);
+app.get('/stream', (req, res, next) => {
+  res.flush = () => {}; 
+  next();
+}, sse.init);
+
+async function sendEvent(payload) {
+  console.log(payload);
+  await sse.send(payload);
+}
+
+// SignalWire real time events
+const createClient = require('@signalwire/realtime-api').createClient;
+createClient({
+  project: process.env.SIGNALWIRE_PROJECT_KEY,
+  token: process.env.SIGNALWIRE_TOKEN
+}).then(async (client) => {
+  client.video.on('room.started', async (roomSession) => {
+    sendEvent(await getActiveRooms());
+  
+    roomSession.on('member.joined', async (member) => {
+      sendEvent(await getActiveRooms());
+    })
+
+    roomSession.on('member.left', async (member) => {
+      sendEvent(await getActiveRooms());
+    })
+  
+    await roomSession.subscribe()
+  });
+
+  client.video.on('room.ended', async (roomSession) => {
+    sendEvent(await getActiveRooms());
+  });
+
+  client.connect()
+});
+
 app.get('/', async (req, res) => {
   var room = req.query.room || `room${getRandomInt(1000)}`;
   var user = req.query.user || `user${getRandomInt(1000)}`;
@@ -124,7 +132,7 @@ app.get('/', async (req, res) => {
 
 app.get('/dashboard', async (req, res) => {
   var rooms = await getActiveRooms();
-  console.log(rooms);
+  console.log(rooms)
   res.render('dashboard', { rooms })
 });
 

public/dashboard.js

@@ -0,0 +1,46 @@
+function Room(props) {
+  return (
+  <div className="card w-25 float-start">
+    <div className="card-body">
+      <h5 className="card-title">{props.room.display_name}</h5>
+      <ul className="list-group list-group-flush">
+        {props.room.members.map((member) => (
+          <li key={props.room.id + member} className="list-group-item">{member}</li>
+        ))}
+      </ul>
+      <p className="text-end">
+        <a href="/?room={room.id}" className="btn btn-primary btn-sm" target="_blank">Join</a>
+      </p>
+    </div>
+  </div>
+  );
+}
+
+const RoomList = React.forwardRef((props, ref) => {
+  const [data, setData] = React.useState(_mainList);
+
+  React.useImperativeHandle(ref, () => ({
+    updateList: (newList) => {
+      setData(newList)
+    }
+  }));
+
+  return (
+    <div className="rooms">
+      {data.map((room) => (
+        <Room room={room} key={room.id}></Room>
+      ))}
+    </div>
+  );
+});
+
+function App(){
+  return (
+    <RoomList ref={RoomList => { window.RoomList = RoomList }}/>
+  )
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);

views/dashboard.ejs

@@ -1,26 +1,25 @@
-<% rooms.forEach(function(room) { %>
-  <div class="card w-25 float-start">
-    <div class="card-body">
-      <h5 class="card-title"><%= room.display_name %></h5>
-      <ul class="list-group list-group-flush">
-        <% room.members.forEach(function(member) { %>
-          <li class="list-group-item"><%= member %></li>
-        <% }); %> 
-      </ul>
-      <p class="text-end">
-        <a href="/?room=<%= room.id %>" class="btn btn-primary btn-sm" target="_blank">Join</a>
-      </p>
-    </div>
-  </div>
-<% }); %>
+<div id="root"></div>
 
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
 <script src="/utility.js"></script>
 
 <script>
-window.ready(function () {
-  var es = new EventSource('/stream');
-  es.onmessage = function (event) {
-    console.log('EVENT SENT', event);
-  };
-})
+  var _mainList = <%- JSON.stringify(rooms) %>;
+
+  window.ready(function () {
+
+    var es = new EventSource('/stream');
+    es.onmessage = function (event) {
+      const data = JSON.parse(event.data);
+      console.log(data);
+      if (Array.isArray(data)) {
+        RoomList.updateList(data);
+      }
+    };
+  })
+</script>
+
+<script type="text/babel" src="/dashboard.js">
 </script>

views/index.ejs

@@ -4,6 +4,11 @@
   </div>
 </div>
 
+<div class="row">
+  <div class="col"><a href="/?room=<%= room %>" target="_blank">Link to room <%= room %></a>
+  </div>
+</div>
+
 <div class="row">
   <div class="col">
     <h5>Participants</h5>