[Socket 入門系列 01] 安裝 Express 框架

日期：
[Socket 入門系列 01] 安裝 Express 框架

學習使用 socket.io，透過官方教學

本系列會先跟著官方教學寫出一個簡單的聊天室範例
再來做進階的功能

因為 web socket 需要 server 端
第一天先照著教學裝好 Express 框架與刻好聊天室的畫面

安裝 Express

教學中使用的是 node.js 的 express 框架，這邊就先照著做
之後如果要換框架再來研究

首先熟門熟路的 npm init 創建 package.json 檔案
再來安裝 express 框架

    npm install express --save

安裝好 Express 框架之後我們來試試看能不能運行

  1. 在專案根目錄下建立一個 index.js 檔案
var app = require('express')();
var http = require('http').createServer(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

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

執行 node index.js 啟動
用瀏覽器開啟 http://localhost:3000/
這時候應該會看到 Express 的 Hello world 畫面

聊天室畫面

因為原本沒用過 Express 順練了解一下怎麼 render 畫面，絕對不是水內容
剛剛我們上面使用了 res.send 來顯示了 Hello world
那如果要顯示一整個 html 檔案呢？使用 res.sendFile
先修改我們的 index.js 路由的部分

app.get('/', function(req, res){
  res.sendFile(__dirname + '/view/index.html');
});

再新建一個 /view/index.html 作為聊天室的模板

<!doctype html>
<html>
 <head>
   <title>Socket.IO chat</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body { font: 13px Helvetica, Arial; }
   form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
   form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
   form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
   #messages { list-style-type: none; margin: 0; padding: 0; }
   #messages li { padding: 5px 10px; }
   #messages li:nth-child(odd) { background: #eee; }
 </style>
 </head>
 <body>
   <ul id="messages"></ul>
   <form action="">
     <input id="m" autocomplete="off" /><button>Send</button>
   </form>
 </body>
</html>

接著在指令視窗按下 Control+C 可以停止運作中的 Express 服務
再重新執行 node index.js 啟動服務，刷新瀏覽器頁面應該就可以看到新的畫面

留言

張貼留言