Websocket - Client 예제

Dev/Web 2015. 12. 3. 15:34
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
<!DOCTYPE HTML>
<html>
 
<head>
 
<script type="text/javascript">
    function WebSocketTest()
    {
        if ("WebSocket" in window)
        {
            display_status("WebSocket is supported by your Browser!");
            
            // Let us open a web socket
            var ws = new WebSocket("ws://localhost:9998/echo");
 
            ws.onopen = function()
            {
                // Web Socket is connected, send data using send()
                send_msg = document.getElementById('sendMsg').value;
                ws.send(send_msg);
            };
 
            ws.onmessage = function(evt)
            { 
                var received_msg = evt.data;
                display_recv_msg(received_msg);
                ws.close();
            };
 
            ws.onclose = function()
            {
                display_status("recv and close ws.");
            };
        }
        else
        {
            display_status("WebSocket NOT supported by your Browser!");
        }
    }
 
    function display_recv_msg(display_msg)
    {
        var displayField = document.getElementById('displayField');
 
        if (displayField)
            displayField.innerHTML = display_msg;
    }
 
    function display_status(status_msg)
    {
        var statusField = document.getElementById('statusField');
 
        if (statusField)
            statusField.innerHTML = status_msg;
    }
    
</script>
 
</head>
 
<body>
 
<div id="sse">
    <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
 
<div>
    <h2>Send : <input type="text" id="sendMsg" value="hello world"><br></h2>
</div>
 
<div>
    <h2>Recv : <code id="displayField"></code></h2>
</div>
 
<div>
    <h2>Status : <code id="statusField"> - </code></h2>
</div>
 
 
</body>
 
</html>
cs


저작자표시 (새창열림)
:

티스토리툴바