日期：2017年9月25日

HTML5 WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下为使用了https://github.com/sitegui/nodejs-websocket的实例

使用方法以及代码：

1
2
3
4
5
>> npm install nodejs-websocket
 
>> node webserver.js
 
>> New connection //代表连接成功

webserver.js
1
2
3
4
5
6
7
8
9
10
11
12
13
var ws = require("nodejs-websocket")
 
// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
    console.log("New connection")
    conn.on("text", function (str) {
        console.log("Received " + str)
        conn.sendText(str.toUpperCase() + "!!!")
    })
    conn.on("close", function (code, reason) {
        console.log("Connection closed")
    })
}).listen(8001)

index.html
XHTML
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <h1>hello</h1>
    <input type="text" id="sendText">
    <input type="button" value="发送" id="sendBtn">
    <div id="recv"></div>
    <script type="text/javascript">
        var websocket = new WebSocket('ws://localhost:8001');
        websocket.onopen = function () {
            console.log('websocket open')
            document.getElementById('recv').innerHTML = "Connected";
        }
        websocket.onclose = function () {
            console.log('websocket close')
 
        }
        websocket.onmessage = function (e) {
            console.log('websocket message：' + e.data)
            document.getElementById('recv').innerHTML = e.data;
        }
        document.getElementById('sendBtn').onclick = function () {
            var txt = document.getElementById('sendText').value;
            websocket.send(txt);
        }
    </script>
</body>
 
</html>