標籤：nod button min on() font border tip nes stop
這不是一個項目而是一個適合剛開始學習的人學習的範例。主要實現了下面準系統：
1：群聊。每個人都能夠收到其它人的訊息，以及能夠發訊息給其它人，每個人用ip地址標識。
2：顯示當前線上使用者。
3：每個使用者登入登出。其它人都能夠看到。
4：每個使用者能夠看到其它人是否正在輸入訊息。
實現方式沒有選擇低效的輪詢方式，而是採用基於websocket協議的socket.io模組，websocket協議同意在client與服務端之間建立一個全雙工系統的通訊通道。因此服務端能夠主動推訊息給client。相比傳統的輪詢，即時性更好。
前端代碼例如以下：
<!doctype html><html><head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #fc5bff; padding: 2px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(217, 222, 221); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style></head><body><ul id="messages"></ul><ul><li id='typingshow'></li></ul><div id='joinshow'></div><div id='leftshow'></div><div id='onlineshow'></div><form action=""> <input id="m" autocomplete="off" /><button id='btn'>Send</button></form><script src="jquery-1.10.2.min.js"></script><script src="/socket.io/socket.io.js"></script><script> var socket = io(); var typingIps={}; var typing=false; var lastTypingTime; function updateTyping() { if (!typing) { typing = true; socket.emit('typing'); } lastTypingTime = (new Date()).getTime(); setTimeout(function () { var typingTimer = (new Date()).getTime(); var timeDiff = typingTimer - lastTypingTime; if (timeDiff >= 400 && typing) { socket.emit('stop typing'); typing = false; } }, 400); } $('form').submit(function(){ socket.emit('chat message',$('#m').val()); socket.emit('stop typing'); typing = false; $('#m').val(''); return false; }); $('#m').keyup(function(){ updateTyping(); }); socket.on('online num',function(msg){ $('#onlineshow').text('當前線上'+msg+'人'); }); socket.on('join', function (msg) { $('#joinshow').text(msg.ip+'增加'); }); socket.on('typing',function(msg){ typingIps[msg.ip]=msg.ip; var typingArr=[]; for(var ip in typingIps){ typingArr.push(typingIps[ip]); } $('#typingshow').text(typingArr.join(',') + '正在輸入...'); }); socket.on('stop typing',function(msg){ delete typingIps[msg.ip]; var typingArr=[]; for(var ip in typingIps){ typingArr.push(typingIps[ip]); } if(typingArr.length===0){ $('#typingshow').text(''); }else{ $('#typingshow').text(typingArr.join(',') + '正在輸入...'); } }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg.ip+'說：'+msg.content)); }); socket.on('user left', function(msg){ $('#leftshow').text(msg.ip+'離開了'); $('#onlineshow').text('當前線上'+msg.onlineNum+'人'); });</script></body></html>
/** * Created by luzhen on 14-11-10. */var express = require('express');var app=express();var http = require('http').Server(app);var io = require('socket.io')(http);var ips={};app.use(express.static(__dirname + '/public'));app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html');});var onlineNum=0;io.on('connection', function (socket) { console.log(socket.request.connection.remoteAddress); ips[socket.request.connection.remoteAddress]=socket.request.connection.remoteAddress;//clientip //socket.handshake.address 服務端ip onlineNum++; socket.broadcast.emit('join', {'ip':socket.request.connection.remoteAddress});//廣播新使用者增加 io.emit('online num',onlineNum);//廣播當前線上人數 socket.on('chat message', function (msg) { io.emit('chat message', {ip:socket.request.connection.remoteAddress,'content':msg}); console.log('message: ' + msg); }); socket.on('typing', function (msg) { socket.broadcast.emit('typing', {'ip':socket.request.connection.remoteAddress}); }); socket.on('stop typing', function (msg) { socket.broadcast.emit('stop typing', {'ip':socket.request.connection.remoteAddress}); }); socket.on('disconnect',function(){ delete ips[socket.request.connection.remoteAddress]; onlineNum--; socket.broadcast.emit('user left', {'ip':socket.request.connection.remoteAddress,'onlineNum':onlineNum}); });});http.listen(3000, function () { console.log('listening on *:3000');});
新增了防止刷屏功能，完整代碼開源在GitHub上。
Demo示範 查看效果
nodejs實如今線群聊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
