好癢的學習筆記: [Node.js]利用socket.io一起來聊天吧~

2015年7月29日星期三

[Node.js]利用socket.io一起來聊天吧~

開始接觸Node.js也一陣子了，在自認為有些基礎後就開始想找一些東西自己嘗試的做看看。

以本人目前對於Node.js的認知就是他可以拿來做Web Service，於是第一個念頭出現了！！

我們來做個聊天室吧！

在找資料的過程中找到了Socket.io這個套件，使用上其實就類似我們所知道的Java Socket、C# Socket這些東西。

Socket.io的用法大致上就是利用一個字串作為事件的key，在依照所接收到的key來做相對應的動作。

說這樣還是太籠統了，馬上來看看簡單的範例。

首先是index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection', function(socket){
 socket.on('chat message', function(msg){
  io.emit('chat message', msg);
  });
});

http.listen(process.env.PORT || 3000, function(){
  console.log('listening on *:3000');
});

建立io後，當有新的Client連上Server時就會進入'connection'的callback方法，而連上的Socket就會開始監聽事件，事件的名稱就是'chat message'，當socket發出'chat message'事件時就會執行所寫的程式內容，以上面為例，當觸發事件後會針對io所有的client socket發出'chat message'事件以及其後發所帶的參數。

再來是index.html，使用Soket.io記得要在網頁上增加以下的js檔案

來看看index.html中的script吧！

var socket = io();

socket.on('chat message', function (msg) {
 $('#messages').append($('
').text(msg));
});

$('form').submit(function () {
 var msg = GetCurrentDate() +userName+ ": "+$('#m').val();
 socket.emit('chat message', msg);
});

在client中同樣先建立socket，並建立監聽Server的'chat message'事件。

而在畫面上當form要發送時，就會利用socket.emit將事件名稱以及參數送給Server。

以上就是非常簡單的Socket.io介紹，其實就是監聽特定字串名稱事件、發送特定名稱事件，非常簡單！

簡單整理一下Socket.io的用法：

socket.on socket 監聽事件

io.emit 直接送給所有的socket

socket.emit socket 發送事件與參數

socket.broadcast.emit 發送訊息給「除了自己之外的所有socket」

以下是我自己嘗試做了聊天室的Demo與Source code，提供給大家參考。

Demo：http://howardchatroom.herokuapp.com/

Source code: http://github.com/howard10335/ChatRoom

目前有的功能：