2014年6月4日 星期三

『Node.js』即時聊天室 Part 1 : 基礎運用介紹 - Socket.io, express

學習新的語言,都有個萬年 hello world (各種語言的 Hello world @Wiki),我想 node.js 也不例外,不過這篇不介紹這個,想說明一個很有意思的功能,那就是即時的聊天室,在這個主題我會分幾個階段來說明,而在本篇會實作基礎的 Socket.io, express 的用法

建立專案

請先建立一個資料夾叫 chatroom,在目錄下建立一個 package.json 檔案,預計裡面要安裝兩個模組,一個是 socket.io,而另一個是 express web framework,一開始先定義好package.json 檔案
{
 "name": "chatroom", //專案名稱
 "version": "0.0.1", //版本號
 "private": true, 
 "dependencies": { //相依套件
  "socket.io": "1.0.3",
  "express": "4.4.0"
 }
如果不知道 dependencies 裡套件的版本的話,請在命令提示字元輸入
$npm info [your library name] version
存檔完畢之後,需要利用套件管理工具 npm 進行安裝,請輸入以下指令
$npm install
裝完之後,會自動建立 node_module 資料夾,裡面則包含 despendencies 所輸入的套件

建立聊天室頁面

我們假想聊天室基本款要有三個控制項,聊天內容區塊 + 輸入框 + 以及送出按鈕,因此我們在根目錄之下,建立一個 index.html 的靜態檔案,並且在畫面就像以下這樣
<div id="chat"></div>
<form id="send-message">
  <input id="message" size="40" />
  <input type="submit" value="Submit" />
 </form>

建立 Socket.io 並啟動服務

這個部分是個重頭戲的地方,直接看看程式,頁面的
  var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server); 
網頁服務監聽的 port
 server.listen(3000);
頁面的啟動,送出設定的預設頁面
app.get('/', function(req, res){
    res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function(socket) {
    socket.on('send message', function(data){
       io.sockets.emit('new message', data);
    });
});
scripts 的部分
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script src="/socket.io/socket.io.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function(){
  var socket = io.connect();
  var $frmMessage = $('#send-message');
  var $boxMessage = $('#message');
  var $chat = $('#chat');

  $frmMessage.submit(function(e){
   e.preventDefault();
   socket.emit('send message', $boxMessage.val().trim());
   $boxMessage.val('');
  });

  socket.on('new message', function(data){
   $chat.append(data + "<br />");
  });
 });
 </script>


   完成,未來會繼續補強一些功能喲

沒有留言:

張貼留言