nodejs搭建websocket伺服器小結

dannygaobo發表於2015-05-20
NodeJSWeb伺服器

對nodejs和js瞭解不深，就是專案上用到，臨時即學即用，只學了websocket幾個api而已，做個小結，因為websocket還是大有前途的

1、環境搭建

（1）安裝node

          直接下載原始碼，./configure && make && make install三部曲

（2）安裝node-server-websocket模組

          先要確保/usr/bin/目錄下有node可執行檔案

      npm install -g ws
（3）將新裝模組Link給node可執行程式 

     sudo ./npm link ws

2、服務端指令碼

（1）建立一個伺服器型別，指定協議為ws

      var  wsServer = require('ws').Server;
（2）例項化一個webServer伺服器，並設定監聽埠 

      wss = new wsServer({port:XXX});
（3）新增伺服器端的事件處理——客戶端請求連線事件connection 

     wss.addListener('connection',function handle(conn));  //conn代表伺服器和客戶端之間的連線，對於伺服器來說，conn就是客戶端
（4）新增伺服器對客戶端訊息事件的處理——客戶端傳送message 

     conn.addListener('message'，function handle(msg));


一個完整的簡單例項 

var conns = new Array();
 
var ws = require('ws').Server;
 
var server = new ws({port:9090});
 
server.addListener('connection', function(conn){
    console.log('connection....');
     
    conns.push(conn);
    conn.addListener('message',function(msg){
        console.log(msg);
        for(var i=0; i<conns.length; i++){
            if(conns[i]!=conn){
                conns[i].send(msg);
            }
        }
    });
});
 
console.log('running......');

3、客戶端指令碼（javascript實現）

（1）例項化一個websock客戶端連線

     var ws = new WebSocket(url); //url = "ws://ip:port/XXX"
（2）按需實現websocket的事件函式 

     ws.onopen = function(event){ ... };
     ws.close = function(event){ ... };
     ws.onerror = function(event){ ... };
     ws.onmessage = function(event){ ... };  //接收資料的回撥

（3）傳送資料 

     ws.send(string);

完整的簡單例項 

<html>
<body>
<p>Test Client</p>
<br>
	
    <script>
        var socket = new WebSocket("ws://......");
        document.write("Clinet is running...");
        socket.onmessage = function(event){
            document.write("recving data");
        };
        socket.onopen = function(event){
		alert("websocket is open");
	};
	socket.onerror = function(event){
		document.write("websocket create failed");
	};
		
	window.onbeforeunload = function(){
             socket.send("Client is Leaving");
             return "Are you sure";
        };
		
    </script>

</body>

</html>













          








相關文章