基於Node.js + socket.io實現WebSocket的聊天DEMO
阿新 • • 發佈:2019-01-30
原文摘自我的前端部落格,歡迎大家來訪問
簡介
最近看Node.js和HTML5,練手了一個簡易版的聊天DEMO,娛樂一下
為什麼需要socket.io?
node.js提供了高效的服務端執行環境,但是由於瀏覽器端對HTML5的支援不一, 為了相容所有瀏覽器,提供卓越的實時的使用者體驗,並且為程式設計師提供客戶端與服務端一致的程式設計體驗, 於是socket.io誕生。
簡答來說socket.io具體以下特點: 1.socket.io設計的目標是支援任何的瀏覽器,任何Mobile裝置。目前支援主流的PC瀏覽器 (IE,Safari,Chrome,Firefox,Opera等),Mobile瀏覽器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基於node.js並簡化了WebSocket API,統一了通訊的API。它支援:WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。 2.socket.io解決了實時的通訊問題,並統一了服務端與客戶端的程式設計方式。啟動了socket以後,就像建立了一條客戶端與服務端的管道,兩邊可以互通有無。
程式碼
建立app.js 原始碼如下
var fs = require('fs') //檔案操作
, http = require('http') //http伺服器
, socketio = require('socket.io'); //socket.io,用來和前臺進行互動
var server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html'});
//將index.html輸出
res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(3000, function() {
console.log('Listening at: http://localhost:3000');
});
//連線成功的回撥
socketio.listen(server).on('connection', function (socket) {
socket.on('message', function (msg) {
console.log('接受到 ', msg);
//將資訊傳送給其他客戶端
socket.broadcast.emit('message' , msg);
});
});
建立index.html
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var iosocket = io.connect();
iosocket.on('connect', function () {
$('#incomingChatMessages').append($('<li>已連線!</li>'));
iosocket.on('message', function(message) {
$('#incomingChatMessages').append($('<li></li>').text(message));
});
iosocket.on('disconnect', function() {
$('#incomingChatMessages').append('<li>失去連線</li>');
});
});
$('#outgoingChatMessage').keypress(function(event) {
if(event.which == 13) {
event.preventDefault();
iosocket.send($('#outgoingChatMessage').val());
$('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
$('#outgoingChatMessage').val('');
}
});
});
</script>
</head>
<body>
控制檯: <ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>
執行&結果
因為依賴了socket.io包,所以用npm 下載
npm install socket.io
最後直接執行
node app.js
執行效果聊天DEMO附上一個實現了很炫聊天DEMO http://segmentfault.com/a/1190000000479518
end from http://hacke2.github.io