-
Notifications
You must be signed in to change notification settings - Fork 9
/
tutorial-rtc-text-chat.html
174 lines (151 loc) · 13.2 KB
/
tutorial-rtc-text-chat.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>rtc.io</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- responsive -->
<link rel="stylesheet" media="screen and (max-width: 960px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 710px)" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="fonts/source-sans/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/code.css">
</head>
<body>
<a class="scroll-point pt-top" name="top"></a>
<header>
<a href="https://github.com/rtc-io"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<a class="scroll-point pt-top" name="top"></a>
<div class="site">
<div class="mascot">
<img src="images/artsio.png">
</div>
<div class="logo" data-subtext="OpenSource WebRTC">
<a href="index.html">rtc.io</a>
</div>
<nav>
<ul>
<li><a href="index.html">About</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="modules.html">Modules</a></li>
</ul>
</nav>
</div>
<div class="shadow"></div>
</header>
<div class="main" role="content"><h1 id="text-chat-using-the-data-channel">Text chat using the data channel</h1>
<p>This demo shows how to use the <a href="https://github.com/rtc-io/rtc">rtc</a> module to set up a data channel and exchange text messages without requiring access to audio or video devices.</p>
<p>NOTE - this simple example works for 2 peer connections only, to properly support text messaging for multiple peers some data channel management is required - see the <a href="https://github.com/rtc-io/rtcio-demo-quickconnect">rtc-quickconnect</a> demo for a fuller example.</p>
<p>Include the bundled rtc module in your HTML page (get the latest build from <a href="https://github.com/rtc-io/rtc/build">https://github.com/rtc-io/rtc/build</a>). The rtc module can also be loaded using require.js.</p>
<div class="highlight"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"path/to/rtc.js"</span><span class="nt">></script></span>
</pre></div>
<p>First we will need to define the options to pass into RTC. A room and a signalling server are required - you can use our hosted signalling server <code>//switchboard.rtc.io</code> for testing purposes. Make sure to add the 'capture: false' option so you are not being asked to access a camera or microphone. The <a href="module-rtc-switchboard.html">rtc-switchboard</a> module is also available to deploy on your own servers.</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">rtcOpts</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">room</span><span class="o">:</span> <span class="s1">'test-data'</span><span class="p">,</span>
<span class="nx">signaller</span><span class="o">:</span> <span class="s1">'https://switchboard.rtc.io'</span><span class="p">,</span>
<span class="nx">capture</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">};</span>
</pre></div>
<p>Now we can call <code>RTC</code> to start a session. This will automatically set the room up for a data channel connection.</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">rtc</span> <span class="o">=</span> <span class="nx">RTC</span><span class="p">(</span><span class="nx">rtcOpts</span><span class="p">);</span>
</pre></div>
<p>We'll need a reference to the DOM element that we want to add our text messages to.</p>
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">messages</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'messages'</span><span class="p">);</span>
</pre></div>
<p>Before we can start sharing text via a data channel we need to wait for the signalling server to create our session. The rtc module fires a <code>ready</code> event when our session is ready to work with.</p>
<div class="highlight"><pre><span class="nx">rtc</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="nx">init</span><span class="p">);</span>
</pre></div>
<p>Once a session is established we can create a data channel and listen for it's <code>opened</code> event. The data channel in this example retains packet order and tries resending a lost packet a maximum of 12 times.</p>
<div class="highlight"><pre><span class="kd">function</span> <span class="nx">init</span><span class="p">(</span><span class="nx">session</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">createDataChannel</span><span class="p">(</span><span class="s1">'chat'</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">ordered</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">maxRetransmits</span><span class="o">:</span> <span class="mi">12</span>
<span class="p">});</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'channel:opened:chat'</span><span class="p">,</span> <span class="nx">bindDataChannelEvents</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
<p>Finally, bind the data channel events so that our users can update the shared text box.</p>
<div class="highlight"><pre><span class="kd">function</span> <span class="nx">bindDataChannelEvents</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">channel</span><span class="p">,</span> <span class="nx">attributes</span><span class="p">,</span> <span class="nx">connection</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Receive message</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">onmessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">messages</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// Send message</span>
<span class="nx">messages</span><span class="p">.</span><span class="nx">onkeyup</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
</pre></div>
<p>Here's the full script:</p>
<div class="highlight"><pre><span class="c1">// Set RTC options.</span>
<span class="kd">var</span> <span class="nx">rtcOpts</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">room</span><span class="o">:</span> <span class="s1">'test-data'</span><span class="p">,</span>
<span class="nx">signaller</span><span class="o">:</span> <span class="s1">'https://switchboard.rtc.io'</span><span class="p">,</span>
<span class="nx">capture</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">};</span>
<span class="c1">// call RTC module</span>
<span class="kd">var</span> <span class="nx">rtc</span> <span class="o">=</span> <span class="nx">RTC</span><span class="p">(</span><span class="nx">rtcOpts</span><span class="p">);</span>
<span class="c1">// A contenteditable element to show our messages</span>
<span class="kd">var</span> <span class="nx">messages</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'messages'</span><span class="p">);</span>
<span class="c1">// Bind to events happening on the data channel</span>
<span class="kd">function</span> <span class="nx">bindDataChannelEvents</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">channel</span><span class="p">,</span> <span class="nx">attributes</span><span class="p">,</span> <span class="nx">connection</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Receive message</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">onmessage</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">messages</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">// Send message</span>
<span class="nx">messages</span><span class="p">.</span><span class="nx">onkeyup</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">channel</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">// Start working with the established session</span>
<span class="kd">function</span> <span class="nx">init</span><span class="p">(</span><span class="nx">session</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">createDataChannel</span><span class="p">(</span><span class="s1">'chat'</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">ordered</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">maxRetransmits</span><span class="o">:</span> <span class="mi">12</span>
<span class="p">});</span>
<span class="nx">session</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'channel:opened:chat'</span><span class="p">,</span> <span class="nx">bindDataChannelEvents</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Detect when RTC has established a session</span>
<span class="nx">rtc</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ready'</span><span class="p">,</span> <span class="nx">init</span><span class="p">);</span>
</pre></div>
<p>And here's the full HTML page to go with it:</p>
<div class="highlight"><pre><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><style></span>
<span class="nf">#messages</span> <span class="p">{</span>
<span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span>
<span class="k">min-height</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../rtc.min.js"</span><span class="nt">></script></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">contenteditable</span><span class="nt">></div></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"rtc-text-chat.js"</span><span class="nt">></script></span>
<span class="nt"></body></span>
</pre></div>
</div>
<footer>
<p>
<a href="http://nicta.com.au">
<img src="images/nicta-logo.gif" alt="NICTA logo">
</a>© NICTA 2013 - 2014
</p>
<p class="license">Project source code is licensed under the <a href="https://github.com/rtc-io/rtc/blob/master/LICENSE">Apache 2.0</a>.</p>
<a class="closing" href="#top"></a>
</footer>
</body>
<script src="js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-26567546-2', 'rtc.io');
ga('send', 'pageview');
</script>
</html>