-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebsockets_example.html
96 lines (91 loc) · 3.37 KB
/
websockets_example.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
<html>
<head>
<title>Basic WebSocket Example</title>
<script type="application/javascript">
var WS = false;
if (window.WebSocket) WS = WebSocket;
if (!WS && window.MozWebSocket) WS = MozWebSocket;
if (!WS)
alert("WebSocket not supported by this browser");
// Get an Element
function $() { return document.getElementById(arguments[0]); }
// Get the value of an Element
function $F() { return document.getElementById(arguments[0]).value; }
var client = {
connect: function(){
this._ws=new WS("ws://localhost:8000/websockets_example_endpoint.yaws?extversion="+$('extVersion').checked +
"&keepalive="+$('keepalive').checked +
"&timeout="+$('timeout').value);
this._ws.onopen=this._onopen;
this._ws.onmessage=this._onmessage;
this._ws.onclose=this._onclose;
$('msgs').innerHTML='';
},
_onopen: function(){
$('connect').className='hidden';
$('connected').className='';
$('options').className='hidden';
$('phrase').focus();
client._send('client-connected');
},
_send: function(message){
if (this._ws)
this._ws.send(message);
},
chat: function(text) {
if (text != null && text.length>0 )
client._send(text);
},
_onmessage: function(m) {
if (m.data){
var text = m.data;
var msg=$('msgs');
var spanText = document.createElement('span');
spanText.className='text';
spanText.innerHTML=text;
var lineBreak = document.createElement('br');
msg.appendChild(spanText);
msg.appendChild(lineBreak);
msg.scrollTop = msg.scrollHeight - msg.clientHeight;
}
},
_onclose: function(m) {
this._ws=null;
$('connect').className='';
$('connected').className='hidden';
$('options').className='';
}
};
</script>
<style type='text/css'>
div.hidden { display: none; }
#msgs { margin-left: 25px; background-color: rgb(211, 211, 211); width: 500px;}
</style>
</head>
<body>
<h1>Basic Echo Example</h1>
<ul><li>Sending "bye" closes the connection.</li>
<li>Sending "say hi later" sends "hi there!" asynchronously.</li>
<li>Sending "fragmented message" sends "frag1frag2frag2".</li>
<li>Sending "something" does nothing.</li>
<li>Other messages are echoed.</li></ul>
<div id="options">
<input id='extVersion' type='checkbox'/> Use extended version<br/>
<input id='keepalive' type='checkbox'/> Enable keepalive timer<br/>
KeepAlive timeout (in milliseconds) <input id='timeout' type='text' size='5'/>
</div>
<div id="connect">
<input id='cA' class='button' type='submit' name='connect' value='Connect'/>
</div>
<br/>
<div id="connected" class="hidden">
Say Something: <input id='phrase' type='text'/>
<input id='sendB' class='button' type='submit' name='connect' value='Send'/>
</div>
<div id="msgs"></div>
<script type='application/javascript'>
$('cA').onclick = function(event) { client.connect(); return false; };
$('sendB').onclick = function(event) { client.chat($F('phrase')); $('phrase').value=''; $('phrase').focus(); return false; };
</script>
</body>
</html>