基於Node.js + socket.io實現WebSocket的聊天DEMO

原文摘自我的前端博客,歡迎大家來訪問



簡介

最近看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>
控制檯:&nbsp;<ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>

運行&結果

因爲依賴了socket.io包,所以用npm 下載

npm install socket.io

最後直接運行

node app.js

home運行效果

附上一個實現了很炫聊天DEMO http://segmentfault.com/a/1190000000479518

home聊天DEMO

end from http://hacke2.github.io

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章