項目代碼下載:點擊這里
-- 基本介紹
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);
};
15. 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});
})
})
};
24. 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 onclick="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>
-- 測試效果
為了看到效果,開3個一樣的窗口.隨便點擊其中一個頁面的按鈕
----------------------點擊前
----------------------點擊后
---------------------------------------------完成.!
項目代碼下載:點擊這里
