HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
以下为使用了https://github.com/sitegui/nodejs-websocket的实例
使用方法以及代码:
>> npm install nodejs-websocket >> node webserver.js >> New connection //代表连接成功
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)
<!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>