系列目錄:Node.js摸石頭系列目錄
一、熱線熱線
上回我們建立了一個框架,並測試正常工作了。在測試的時候,我們得到了一段長長的 Js 代碼。這段代碼可是寶貝啊,這是公主送給您的話機啊,趕緊收好,用它我們就可以和公主熱線啦!趁今天聖誕節,趕緊和公主說聲節日快樂吧,否則可要沒戲哦。
好,速度:在 chatroom 文件夾下建一個 .htm 文件,名字嘛就叫 chatClient.htm 好了。chatClient.htm 原本是一平淡無奇的文件,不過,我們把前面獲得的“話機”給他,他就成了我們的接線員了。作為一名充滿好奇心的程序猿,我相信您已經把話機拆開,把您的爪子在話機里摸啊摸的,嗯,這個事請等等再干,我們現在要做的,是從外面使用它,而不是研究它的原理。咱不能等把電視機怎么干活的弄明白再來看電視,您說是吧?
<html> <head> <title>Chat Room</title> <script src="http://localhost:888/socket.io/socket.io.js"></script> <script type="text/javascript"> //TODO 這里是負責建立熱線的代碼 // TODO 這里負責接收和傳送消息的代碼 </script> </head> <body> <h1>Chat Room</h1> <div id="chatbox"></div> </body> </html>
好了,激動人心的時刻就要到了,我們要建立一條熱線了,在一個美麗的聖誕節,和一位美麗的公主,建立一條暢通無阻的雙向全雙工的 web 史上史無前例的……誰踩我?哦,哦上代碼:
//TODO 這里是負責建立熱線的代碼
var hotline = io.connect(‘http://localhost:888’);
將上述代碼插入前面的 chatroom.htm 文件,運行服務器端 app.js 文件,然后,用瀏覽器打開 chatroom.htm 文件,觀察服務器控制台:
如果看到我們控制台上出現了我們自己打印的連接成功的信息,那么這條熱線就宣布成功。好吧,提醒下我們在服務器端怎么寫的 ( app.js 文件里 ):
// WebSocket 協議握手成功 io.sockets.on('connection',function(socket) { console.log("[SERVER]Connection OK!"); });
提醒注意一下,這里的連接事件是 io.sockets.on 上,和我們后面拿到單個 socket ,在 socket.on 上掛事件有點區別,我坦白,在這里我折騰了好一會,等到我發現問題,不禁忿恨自己的莽撞!粗心~有眼無珠~
二、卿卿我我
熱線建好了,開始親密接觸吧。
客戶端,我們可以用剛才拿到的 hotline 的 emit 方法來發送消息, on 方法來處理接收到的消息。
服務器端,您注意到這里:
io.sockets.on('connection', //'connection' 是socket.io 保留的,不能錯哦 function( socket ) { //socket 就是我們的熱線了 socket.emit('sSayhello',{hi:'Happy new year.'}); //'sSayhello'是我們自定義的,客戶端聽取的時候要指定同樣的事件名 socket.on('cSayhello',function(data){ //'cSayhello'需要和客戶端發送時定義的事件名相同 console.log('[CLIENT]Client say hi:' ); console.log(data); }); });
三、示例源碼
請原諒我直接上源碼了,好困啊,迷糊中……zzzZZZ
我想該說的我基本都說了,有什么問題請留言吧。
祝大家聖誕節快樂!!!新年快樂!!!合家安康!!!