項目代碼下載下傳:點選這裡
-- 基本介紹
express
express指令行生成項目架構點選這裡;
socket.io
socket.io的作用是實時重新整理,主要用于聊天室,競拍等場景,socket.io封裝了以下5種方法 Adobe® Flash® Socket
AJAX long polling
AJAX multipart streaming
Forever Iframe
JSONP Polling
在浏覽器運作的時候,socket.io會自動從上到下選擇浏覽器所支援的最優技術; 是以,在使用socket.io的時候完全不用擔心浏覽器相容問題,手機端同樣相容.
-- 指令行生成項目
生成項目架構
我在F盤生成了一個socketio的項目,不會的點選這裡. 安裝socket.io npm install socket.io
封裝socket.io
在項目根目錄下建立socketio.js檔案:
/*
封裝socket.io,為了擷取server以便監聽.
2016年8月8日10:28:24
*/
var socketio = {};
var socket_io = require('socket.io');
//擷取io
socketio.getSocketio = function(server){
var io = socket_io.listen(server);
};
module.exports = socketio;
引入封裝
這一步是為了讓socket.io能在express中運作的關鍵. 改造bin目錄下的www檔案 首先:引入上面封裝好的socket.js檔案, 在var http = require('http');後面加入 var io = require('../socketio'); 然後:在var server = http.createServer(app);後面加入 io.getSocketio(server);
這樣在express中就能使用socket.io了,下面改造項目測試.
-- 改造項目
-- socket.js 監聽了一個click1事件,觸發click2事件.
/*
封裝socket.io,為了擷取server以便監聽.
2016年8月8日10:28:24
*/
var socketio = {};
var socket_io = require('socket.io');
//擷取io
socketio.getSocketio = function(server){
var io = socket_io.listen(server);
io.sockets.on('connection', function (socket) {
console.log('連接配接成功');
socket.on('click1',function(){
console.log('監聽點選事件');
var datas = [1,2,3,4,5];
socket.emit('click2', {datas: datas});
socket.broadcast.emit('click2', {datas: datas});
})
})
};
module.exports = socketio;
-- index.ejs 頁面的socket.io.js引用的是cdn靜态資源,添加一個按鈕,觸發click1事件, 監聽click2事件,擷取背景傳過來的值,循環放到ul中.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!--socket.io-->
<script type="text/javascript" src="http://cdn.staticfile.org/socket.io/1.3.7/socket.io.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<button οnclick="a()">按鈕</button>
<ul id="ultext">
</ul>
</body>
<script type="text/javascript">
var socket = io();
function a(){
socket.emit('click1');
}
//監聽click2事件
socket.on('click2', function(data){
var htmldatas = data.datas;
var html = '';
for (var i = 0; i < htmldatas.length; i++) {
var htmldata = htmldatas[i];
html += '<li>'+htmldata+'</li>';
}
document.getElementById('ultext').innerHTML = html;
})
</script>
</html>
-- 測試效果
運作:通路http://localhost:3000/
為了看到效果,開3個一樣的視窗.随便點選其中一個頁面的按鈕 ----------------------點選前
----------------------點選後
---------------------------------------------完成.
項目代碼下載下傳:點選這裡