費話就不多說了,先來說一個WebSocket的環境配置,用的是node.js和Socket.IO。
首先需要安裝node.js,很簡單。下載node.js,下載完成後雙擊安裝,CMD打開命令窗口,指定到nodejs的安裝目錄。
安裝Socket.IO也很容易,一條語包搞定,
npm install socket.io,等待安裝完成就可以
在nodejs安裝目錄下,新建http.js(文件名任取),代碼如下:
var fs = require('fs')
, http = require('http')
, socketio = require('socket.io');
var server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html'});
res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(8888, function() {
console.log('Listening at: http://localhost:8888');
});
socketio.listen(server).on('connection', function (socket) {
socket.on('message', function (msg) {
console.log('Message Received: ', msg);
socket.broadcast.emit('message', msg);
});
});
再新建一個index.html,代碼如下:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var iosocket = io.connect();
iosocket.on('connect', function () {
$('#incomingChatMessages').append($('<li>Connected</li>'));
iosocket.on('message', function(message) {
$('#incomingChatMessages').append($('<li></li>').text(message));
});
iosocket.on('disconnect', function() {
$('#incomingChatMessages').append('<li>Disconnected</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>
Incoming Chat: <ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>
到此,所有的代碼部分都已經完成,接下來就是運行了,
在命令窗口中,切換到nodejs的安裝目錄,運行如下指令:
>node http.js,效果如下圖
現在我們運行兩個浏覽器(必須支持websocket的)就可以相互發消息了,效果圖下圖