實現使用Websocket通訊的聊天室——Node.js摸石頭系列之六


系列目錄: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 文件,觀察服務器控制台:

    chatroom01

    如果看到我們控制台上出現了我們自己打印的連接成功的信息,那么這條熱線就宣布成功。好吧,提醒下我們在服務器端怎么寫的 ( 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

    我想該說的我基本都說了,有什么問題請留言吧。

    祝大家聖誕節快樂!!!新年快樂!!!合家安康!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM