express入门（12）- websocket

1，WebSocket原理

• WebSocket是为解决客户端与服务端实时通信而产生的技术。WebSocket是HTML5开始提供的一种在单个 TCP连接上进行全双工通讯的协议。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
• WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。
• 采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。目前支持WebSocket环境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，还有html5 的websocket方案。
• 目前支持WebSocket环境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，还有html5 的websocket方案，但是目前在我国浏览器使用情况上，IE用户还占有50%左右的市场份额，html5 的websocket只能支持IE10+和其他高端浏览器，在兼容性方面socket.io做的很好，所以对于前端工程师，我们优先选Nodejs和socket.io来搭建WebSocket服务器端

2，环境搭建

（1）搭建nodejs环境，搭建express环境
（2）搭建websocket环境

npm install socket.io

npm install nodejs-websocket

（3）搭建[nodejs环境]

2，客户端编写

（1）创建 WebSocket 对象

//url:服务器地址
var Socket = new WebSocket(url);

实例：

ws = new WebSocket("ws://192.168.3.105:8080");

（2）WebSocket 事件

open：连接建立时触发
message：客户端接收服务端数据时触发
error：通信发生错误时触发
close：连接关闭时触发

实例：

ws.onopen = function () {
                console.log("ws open");
            }
ws.onmessage = function (event) {
     //1,创建一个div节点
     var div = document.createElement("div");
     //2,把服务器传送回来的世界放到div节点
     div.textContent = event.data;
     //3,显示数据
     document.body.appendChild(div);
}

ws.onclose = function () {
    console.log("ws close");
}
ws.onerror = function () {
    console.error("ws error");
}

（3）WebSocket 方法

Socket.send()：使用连接发送数据

实例：

ws.send("hello");

3，服务器编写

（1）引入websocket

var ws = require("nodejs-websocket");

（2）创建服务器，实现握手操作（实现互动）

var server = ws.createServer(function (conn) {
  console.log('connection sussess');
  conn.on("text", function (str) {
   server.connections.forEach(function (connection) {
            connection.sendText(str);
    });
  });
});

（3）服务器监听

server.listen(8080);//设置服务器端口

4，源码地址