forked from butorenjin/easyrtc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo_instant_messaging.html
104 lines (94 loc) · 4.96 KB
/
demo_instant_messaging.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
<title>EasyRTC Demo: Instant Messaging</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.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:300px;
border:solid 1px gray;
overflow-y:scroll;
}
</style>
<!--show-->
</head>
<body onload="connect()">
<!--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"><div class="menu_item">Local Demos</div></a><a class="menu_link" href="https://github.com/priologic/easyrtc/tree/master/docs"><div class="menu_item">Documentation</div></a><a class="menu_link" href="https://easyrtc.com/forum/"><div class="menu_item">Support: EasyRTC Forums</div></a><a class="menu_link" href="http://www.easyrtc.com/"><div class="menu_item">EasyRTC.com</div></a></div>
<div id="main">
<!-- Main Content -->
<h1>EasyRTC Demo: Instant Messaging</h1>
<p>This application demonstrates text messaging using the easyrtc.sendDataWS method.
It should connect to the server upon start up, and display buttons for the other
peers running the same application.</p>
<p>To use it, enter a message into the text box on the left side of the page.
Then press one of the buttons for another peer to send the message to that peer.
The message should appear on the text box to the right on both this page, and that of the peer.</p>
<hr />
<h2>The Demo</h2>
<!--show-->
<div id="sendMessageArea">
<div id="iam">Obtaining ID...</div>
<textarea id="sendMessageText"></textarea>
<div id="otherClients"></div>
</div>
<div id="receiveMessageArea">
Received Messages:
<div id="conversation"></div>
</div>
<!--hide-->
<hr />
<h2>The Code</h2>
<h3>HTML</h3>
<pre id="prettyHtml" class="prettyprint linenums:1">
</pre>
<h3>JavaScript</h3>
<p>The contents of demo_instant_messaging.js:</p>
<pre id="prettyJS" class="prettyprint linenums:1">
</pre>
<!-- Runs the SyntaxHighlighter -->
<script type="text/javascript">
loadAndFilter(window.location.href, "prettyHtml",2 );
loadAndFilter(getHelperPath("js"), "prettyJS", 2);
</script>
<!-- End Main Content -->
</div>
<!--hide-->
<div id="footer">
<a href="http://www.skedans.com/?from=landing"><img id="logo_priologic" src="images/skedans_logo.png" height="40" width="150" alt="Created By Skedans Systems, Inc." /></a>
<a href="http://www.easyrtc.com/?from=landing"><img id="logo_pb_easyrtc" src="/easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By EasyRTC" /></a>
<p><em>© 2016 - Skedans Systems, Inc., All Rights Reserved.</em></p>
<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>
<!--show-->
</body>
</html>