diff --git a/app/assets/javascripts/signaling-server.js b/app/assets/javascripts/signaling-server.js index b77bc6e..25db06a 100644 --- a/app/assets/javascripts/signaling-server.js +++ b/app/assets/javascripts/signaling-server.js @@ -17,6 +17,7 @@ let localstream; window.onload = () => { currentUser = document.getElementById("current-user").innerHTML; + console.log(currentUser) localVideo = document.getElementById("local-video"); remoteVideoContainer = document.getElementById("remote-video-container"); }; @@ -40,17 +41,49 @@ document.onreadystatechange = async () => { } }; +// find chatroom +// const handleJoinSession = async () => { +// App.session = await App.cable.subscriptions.create("VideoSessionChannel", { +// connected: () => { +// broadcastData({ +// type: JOIN_ROOM, +// from: currentUser +// }); +// }, +// received: data => { +// console.log("received", data); +// if (data.from === currentUser) return; +// switch (data.type) { +// case JOIN_ROOM: +// return joinRoom(data); +// case EXCHANGE: +// if (data.to !== currentUser) return; +// return exchange(data); +// case REMOVE_USER: +// return removeUser(data); +// default: +// return; +// } +// } +// }); +// }; +const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"] const handleJoinSession = async () => { - App.session = await App.cable.subscriptions.create("VideoSessionChannel", { + App['chatroom' + chatroomId] = await App.cable.subscriptions.create({ + channel: "ChatRoomsChannel", + room: chatroomId + }, { connected: () => { + console.log(chatroomId) broadcastData({ type: JOIN_ROOM, - from: currentUser + from: currentUser, + room: chatroomId }); }, received: data => { - console.log("received", data); + console.log(data) if (data.from === currentUser) return; switch (data.type) { case JOIN_ROOM: @@ -88,7 +121,6 @@ const joinRoom = data => { }; const removeUser = data => { - console.log("removing user", data.from); let video = document.getElementById(`remoteVideoContainer+${data.from}`); video && video.remove(); delete pcPeers[data.from]; @@ -96,18 +128,21 @@ const removeUser = data => { const broadcastData = data => { - fetch("sessions", { + if (data.type === EXCHANGE) { + console.log("yayyy") + } + fetch("chat_room_sessions", { method: "POST", body: JSON.stringify(data), - headers: { "content-type": "application/json" } + headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content } }); }; const createPC = (userId, isOffer) => { let pc = new RTCPeerConnection(ice); + let test = userId pcPeers[userId] = pc; pc.addStream(localstream); - if (isOffer) { pc .createOffer() @@ -117,7 +152,8 @@ const createPC = (userId, isOffer) => { type: EXCHANGE, from: currentUser, to: userId, - sdp: JSON.stringify(pc.localDescription) + sdp: JSON.stringify(pc.localDescription), + room: chatroomId }); }) .catch(logError); @@ -129,7 +165,8 @@ const createPC = (userId, isOffer) => { type: EXCHANGE, from: currentUser, to: userId, - candidate: JSON.stringify(event.candidate) + candidate: JSON.stringify(event.candidate), + room: chatroomId }); } }; @@ -186,7 +223,8 @@ const exchange = data => { type: EXCHANGE, from: currentUser, to: data.from, - sdp: JSON.stringify(pc.localDescription) + sdp: JSON.stringify(pc.localDescription), + room: chatroomId }); }); } diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss index cb071eb..b1de415 100644 --- a/app/assets/stylesheets/pages/_contacts.scss +++ b/app/assets/stylesheets/pages/_contacts.scss @@ -50,6 +50,10 @@ a:hover { color: $icon; font-size: 25px; } + button { + height: 0; + width: 0; + } } } diff --git a/app/channels/chat_rooms_channel.rb b/app/channels/chat_rooms_channel.rb new file mode 100644 index 0000000..20b3201 --- /dev/null +++ b/app/channels/chat_rooms_channel.rb @@ -0,0 +1,9 @@ +class ChatRoomsChannel < ApplicationCable::Channel + def subscribed + stream_from "chat_room_#{params[:room]}" + end + + def unsubscribed + # Any cleanup needed when channel is unsubscribed + end +end diff --git a/app/channels/notifications_channel.rb b/app/channels/notifications_channel.rb new file mode 100644 index 0000000..ad0ec43 --- /dev/null +++ b/app/channels/notifications_channel.rb @@ -0,0 +1,9 @@ +class NotificationsChannel < ApplicationCable::Channel + def subscribed + stream_from "notifications" + end + + def unsubscribed + # Any cleanup needed when channel is unsubscribed + end +end diff --git a/app/controllers/chat_rooms_controller.rb b/app/controllers/chat_rooms_controller.rb new file mode 100644 index 0000000..37b681c --- /dev/null +++ b/app/controllers/chat_rooms_controller.rb @@ -0,0 +1,24 @@ +class ChatRoomsController < ApplicationController + + def show + @chat_room = ChatRoom.find(params[:id]) + end + + def create + # HTTP status code 200 with an empty body + head :no_content + puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>11123213213213123213" + puts params + puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>11123213213213123213" + + ActionCable.server.broadcast "chat_room_#{params[:room]}", session_params + end + + private + + def session_params + # SDP = Session description protocol (codec info from client) + # Candidate = ICE candidates (e.g. TURN and STUN server) + params.permit(:type, :from, :to, :sdp, :candidate, :room) + end +end diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 8aa4a2a..efd5757 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -1,5 +1,6 @@ class PagesController < ApplicationController # skip_before_action :authenticate_user!, only: [:call] + skip_before_action :verify_authenticity_token def call end @@ -9,4 +10,63 @@ class PagesController < ApplicationController def home end + + def cable_testing + chatroom = 'chat_room_' + params[:chat_room_id] + puts params + ActionCable.server.broadcast(chatroom, { message: 'test' }) + head :ok + end + + def establish_call + head :ok + puts "params: #{params}" + chat_room = ChatRoom.create! + puts "Created chat room with id: #{chat_room.id}" + chat_room_participation = ChatRoomParticipation.create!(chat_room: chat_room, user: current_user) + puts "Created chat room participation with user: #{current_user.email} assigned to chat_room #{chat_room.id}" + puts "Subscribed user to chat room" + + contact = User.find(params[:contact_id]) + request = Request.create!(chat_room: chat_room, user: contact) + puts "Made a request to call #{contact.email}" + ActionCable.server.broadcast('notifications', { + message: { + user_id: contact.id, + chat_room_id: chat_room.id + } + }) + + end + + def accept_call + puts "-----------------------------------------" + puts params + puts "IT WORKED" + chat_room = ChatRoom.find(params[:chat_room_id]) + request = Request.where("user_id = ? AND chat_room_id = ?", current_user.id, chat_room.id) + + request[0].accepted = true + puts "create new chat room participation" + chat_room_participation = ChatRoomParticipation.create!(chat_room: chat_room, user: current_user) + puts "Created chat room participation with user: #{current_user.email} assigned to chat_room #{chat_room.id}" + + other_caller = chat_room.users.find { |u| u != current_user } # remember to update this later + puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>..HHHHHHHHH" + puts other_caller + puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>..HHHHHHHHH" + # redirect caller to chat room + ActionCable.server.broadcast('notifications', { + head: 302, # redirection code, just to make it clear what you're doing + path: chat_room_path(chat_room), # you'll need to use url_helpers, so include them in your file + body: { caller: other_caller.id } + } + # other_caller, # or however you identify your subscriber + ) + # redirect callee to chat room + redirect_to chat_room_path(chat_room) + # broadcast another message to caller + # head: 302 + + end end diff --git a/app/controllers/requests_controller.rb b/app/controllers/requests_controller.rb new file mode 100644 index 0000000..ccb6cb8 --- /dev/null +++ b/app/controllers/requests_controller.rb @@ -0,0 +1,7 @@ +class RequestsController < ApplicationController + + def accept + + # Create new Chat Room + end +end diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 01dfd79..7eb9154 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1 +1,2 @@ import "bootstrap"; + diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js new file mode 100644 index 0000000..46b193b --- /dev/null +++ b/app/javascript/packs/chatrooms.js @@ -0,0 +1,35 @@ +import ActionCable from 'actioncable' + +// create App object with key cable == new cosumer +(function() { + window.App || (window.App = {}); + + App.cable = ActionCable.createConsumer(); + +}).call(this); + +// find chatroom id +const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"] + +// create subsciptions +App['chatroom' + chatroomId] = App.cable.subscriptions.create({ + channel: 'ChatRoomsChannel', + room: chatroomId +}, { + connected: () => { + }, + received: data => { + } +}) + +// Testing ActionCable +const testBtn = document.getElementById('test-btn') +testBtn.addEventListener('click', event => { + fetch(`/chat_rooms/${chatroomId}/cable_testing` , { + method: 'POST', + body: JSON.stringify({}) + }) +}) + + + diff --git a/app/javascript/packs/notifications.js b/app/javascript/packs/notifications.js new file mode 100644 index 0000000..cff3892 --- /dev/null +++ b/app/javascript/packs/notifications.js @@ -0,0 +1,56 @@ +import ActionCable from 'actioncable' + +// create App object with key cable == new cosumer +(function() { + window.App || (window.App = {}); + + App.cable = ActionCable.createConsumer(); + +}).call(this); + + +const userId = parseInt(document.getElementById("my-user-id").dataset["userId"]) +let chatRoomId = null + + +App.cable.subscriptions.create({ + channel: 'NotificationsChannel' +}, { + connected: () => { + console.log('Connected to NotificationsChannel') + }, + received: data => { + // console.log(data["message"]["user_id"]) + // console.log(userId) + console.log("received broadcast") + // console.log(data.body) + if (data.head === 302 && data.body["caller"] === userId && data.path ) { + window.location.pathname = data.path + } else if (data["message"]["user_id"] === userId) { + console.log("TRIGGER MODAL") + const acceptButton = document.getElementById('accept-button') + acceptButton.style.display = "block" + // const receiveCall = document.getElementById('receive-call') + // receiveCall.dataset.toggle = 'modal' + // receiveCall.dataset.target ='#calleeModal' + // console.log(receiveCall) + + // const calleeModal = document.getElementById('calleeModal') + // calleeModal.modal("show") + chatRoomId = data["message"]["chat_room_id"] + console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`) + } else { + console.log(data) + } + + + } +}) + + +const acceptButton = document.getElementById('accept-button') + +acceptButton.addEventListener('click', event => { + // event.preventDefault() + document.getElementById('chat-room-id').value = chatRoomId +}) diff --git a/app/models/chat_room.rb b/app/models/chat_room.rb new file mode 100644 index 0000000..f4ac46b --- /dev/null +++ b/app/models/chat_room.rb @@ -0,0 +1,5 @@ +class ChatRoom < ApplicationRecord + has_many :chat_room_participations + has_many :users, through: :chat_room_participations + has_many :requests +end diff --git a/app/models/chat_room_participation.rb b/app/models/chat_room_participation.rb new file mode 100644 index 0000000..86931ec --- /dev/null +++ b/app/models/chat_room_participation.rb @@ -0,0 +1,4 @@ +class ChatRoomParticipation < ApplicationRecord + belongs_to :user + belongs_to :chat_room +end diff --git a/app/models/connection.rb b/app/models/connection.rb index 0028286..f66456a 100644 --- a/app/models/connection.rb +++ b/app/models/connection.rb @@ -8,7 +8,7 @@ class Connection < ApplicationRecord def create_inverted_connection unless Connection.where('user_id = ? and contact_id = ?', self.contact.id, self.user.id).length > 0 - Connection.create!(user: self.contact, contact: self.user) + inverted = Connection.create!(user: self.contact, contact: self.user) end end end diff --git a/app/models/request.rb b/app/models/request.rb new file mode 100644 index 0000000..2857ced --- /dev/null +++ b/app/models/request.rb @@ -0,0 +1,4 @@ +class Request < ApplicationRecord + belongs_to :user + belongs_to :chat_room +end diff --git a/app/models/user.rb b/app/models/user.rb index 265a42b..6043bee 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -6,6 +6,9 @@ class User < ApplicationRecord :recoverable, :rememberable, :validatable has_many :connections + has_many :chat_room_participations + has_many :chat_rooms, through: :chat_room_participations + has_many :requests mount_uploader :photo, PhotoUploader diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb new file mode 100644 index 0000000..4f6f6f4 --- /dev/null +++ b/app/views/chat_rooms/show.html.erb @@ -0,0 +1,21 @@ + + +
FirstName LastName
+ <% if contact.nil? || contact.nil? %> +<%= contact.email %>
+ <% else %> +<%= contact.email %>
+ + <% end %>Last call: <%= Time.now %>