open-easyrtc
Version:
Open-EasyRTC enables quick development of WebRTC
198 lines (177 loc) • 9.44 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
<title>EasyRTC Demo: Instant Messaging + Rooms </title>
<link rel="stylesheet" type="text/css" href="../easyrtc/easyrtc.css" />
<!--hide-->
<link rel="stylesheet" type="text/css" href="css/landing.css" />
<!-- Prettify Code -->
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />
<script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
<script type="text/javascript" src="js/prettify/jquery.min.js"></script>
<!--show-->
<!-- Assumes global locations for socket.io.js and easyrtc.js -->
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="../easyrtc/easyrtc.js"></script>
<script type="text/javascript" src="js/demo_instant_messaging_rooms.js"></script>
<!--hide-->
<!-- Styles used within the demo -->
<style type="text/css">
#stuffToSend {
width:300px;
}
#sendMessageArea{
float:left;
width:400px;
padding-right:20px;
}
#sendMessageText{
width:100%;
}
#conversation {
height:150px;
border:solid 1px gray;
overflow-y:scroll;
}
.roomDiv {
margin-bottom: 15px;
background-color: antiquewhite;
}
.roomOccupants{
margin-left: 20px;
}
#main.connected>.preconnection{
display:none;
}
#main.notconnected>.postconnection{
display:none;
}
.quickJoin {
display: inline-block;
}
#quickJoinBlock {
display: inline-block;
}
</style>
<!--show-->
</head>
<body onload="initApp();" >
<!--hide-->
<div id="container">
<div id="header">
<a href="index.html"><img id="logo_easyrtc" src="images/easyrtc_logo.png" alt="EasyRTC" style="" /></a>
</div>
<div id="menu">
<a class="menu_link" href="index.html"><span class="menu_item">Local Demos</span></a>
<a class="menu_link" href="http://www.easyrtc.com/docs/"><span class="menu_item">Documentation</span></a>
<a class="menu_link" href="https://github.com/priologic/easyrtc/issues"><span class="menu_item">Github Support</span></a>
<a class="menu_link" href="http://www.easyrtc.com/"><span class="menu_item">Easyrtc.com</span></a>
</div>
<div id="main">
<!-- Main Content -->
<h1>EasyRTC Demo: Instant Messaging + Rooms</h1>
<p><strong>Note:</strong> This is primarily an application new features going into EasyRTC. It's currently not written to be a tutorial, but it does demonstrate how to use various features like presence and room targeted messaging.</p>
<hr />
<h2>The Demo</h2>
<!--show-->
<div class="preconnection">
Username: <input type="text" id="userNameField" />
Password: <input type="text" id="credentialField" />
<div >
<button id="connectButton" onclick="connect();">Connect</button>
</div>
<hr>
</div>
<div class="postconnection">
<button onclick="disconnect();">Disconnect from server.</button>
</div>
<div>
Presence:
<input type="radio" name="presence" onclick="setPresence('away');"/>away
<input type="radio" name="presence" checked onclick="setPresence('chat');"/>chat
<input type="radio" name="presence" onclick="setPresence('dnd');"/>dnd
<input type="radio" name="presence" onclick="setPresence('xa');"/>xa
<input type="text" onkeyup="updatePresenceStatus(this.value);" />
</div>
<hr>
<div >
Quick Join -
<div id="quickJoinBlock"></div> <button onclick="refreshRoomList();"> Refresh</button>
<button onclick="addRoom(null, null, true);">or join </button>
<input id="roomToAdd" type="text" size="20" />
<br>
Optional room parameters<input id="optRoomParms" type="text" size="20"/>
</div>
<div class="postconnection">
<hr>
<div id="sendMessageArea">
<div id="iam">Not connected yet</div>
<textarea id="sendMessageText" placeholder="Enter your message here"></textarea>
Rooms:
<div id="rooms"></div>
</div>
<div id="receiveMessageArea">
Received Messages:
<div id="conversation"></div>
</div>
</div>
<hr>
<div>
<h3> Adding api fields</h3>
<input type="text" id="apiroomname" placeholder="room name">
<input type="text" id="apifieldname" placeholder="field name"><br>
<input size="50" type="text" id="apifieldvalue" placeholder="field value"><br>
<button onclick="addApiField()">Add the api field</button>
</div>
<div>
<h3>Getting the list of room occupants</h3>
<input type="text" id="queryRoom" placeholder="room name">
<button onclick="queryRoomNames();">Dump occupant names to console</button>
</div>
<div class="postconnection">
<hr>
<h3>Fields from server</h3>
<div id="fields">
</div>
<hr>
<button onclick="easyrtc.getFreshIceConfig();" class="postconnection"> Get Fresh ICE configuration</button>
<hr>
<h3> Name To Id</h3>
<div >
<input id="targetName" type="text" />
<button onclick="getIdsOfName();">Fetch ids</button>
<div id="foundIds"></div>
</div>
</div>
<!--hide-->
<hr />
<h2>Testing the following EasyRTC Features:</h2>
<ul>
<li><strong>Authentication</strong> - If username is provided, it will be available to others to see.</li>
<li><strong>Define Rooms during Authentication</strong> - You can join rooms before you press 'Connect'.</li>
<li><strong>Default Rooms</strong> - If you join no rooms before you connect, you will join the default room.</li>
<li><strong>Messages to All In Room (targetRoom)</strong> - Type a message, then click on a room name to send it to everyone in the same room. When received, the other client will know it was sent to the room at large.</li>
<li><strong>Message to Individual In Room (targetRoom + targetEasyrtcid)</strong> - Type a message, then click on another client in a room to send it to just that person. That person will know it was sent directly to them, and that it was sent via a specific room.</li>
<li><strong>Presence</strong> - Your presence gets sent to all clients in rooms you share. DND=Do not disturb. XE=Extended Away. The status field can be any string.</li>
<li><strong>Delta Lists</strong> - After initial login, the client should only receive changes to who is online.</li>
</ul>
<!-- End Main Content -->
</div>
<!--hide-->
<div id="footer">
<a href="https://github.com/open-easyrtc/open-easyrtc"><img id="logo_pb_easyrtc" src="../easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By Open-EasyRTC" /></a>
<p id="license">EasyRTC source code released under a BSD2 License. <a href="https://github.com/priologic/easyrtc/blob/master/LICENSE">See LICENSE file in project folder</a> for details.</p>
</div>
</div>
<script type="text/javascript">
addQuickJoinButtons({
room1: {roomName: "room1", numberClients: " "},
room2: {roomName: "room2", numberClients: " "},
room3: {roomName: "room3", numberClients: " "}
}
);
</script>
</body>
</html>