nodejs-07 製作聊天室02 socket.io的應用


Ercrta 嵐
在安裝目錄下的node_modules\socket.io\node_modules\socket.io-client\dist\資料夾下，可以找到socket.io.js，client端(Html)需要include這支js。
找到這支後，讓html include它，也就是在html加入這一行：

接下來我們就可以寫Code了
client端(html)：index.html


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>nodejs-07 製作聊天室02</title>
  <script src="socket.io.js"></script>
 <script>
  var socket = io.connect('http://localhost:8889');//1.client要求連線
  socket.on('connect',function(){//3.client收到連線通知
   alert('connect');
   socket.emit('ClientCallServer');//4.emit傳送訊息給server，第一個參數是名稱，第二個之後的參數是要傳給server的值，這個範例是不傳值
  });
  socket.on('ServerCallClient',function(){//7.收到server的呼叫
   alert('ServerCallClient');
  });
  socket.on('disconnect', function(){//11.收到Server斷線事件
   alert('server主動斷線');
  });
 </script>
 </head>
 <body>
 測試頁
 </body>
</html>
SERVER端：index.js 
var io = require('socket.io').listen(8889);//監聽8889port
io.sockets.on('connection', function (socket) {
 console.log('connect'); //2.收到client的連線
 socket.on('ClientCallServer',function(){
  console.log('5. get client data'); //5.收到client的呼叫
  socket.emit('ServerCallClient'); //6.送資料給client
 });

 socket.on('disconnect', function(){
  console.log('client 斷線'); //9.收到client斷線
 });

 setTimeout(function(){//10.server主動斷線//這是測試用，4秒後server主動斷線
  console.log('server送斷線訊息');
  socket.emit('disconnect');
 },4000);

});

簡單的說，不論cliet端或seerver端，emit就是送出命令；on就是接收命令，socket.io已經把一些常用的東西整合好方便使用了，但我測試下來，對於斷線還是有些bug，尤其是ie，server可能會收不到client傳來的命令，看來這點要再想辦法解決
Category:

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)