注：本博文是作者原創，轉載請注明出處。
在項目中時常會使用到socketio，今天我們就來實現Node+socketio實現群發消息功能，
項目源碼：https://github.com/zhangxy1035/socketio
注：在該項目中只是實現了功能，並沒有對頁面進行渲染美化，在接來下會繼續更新此代碼。
關於socketio以及node在這里不再贅述，
關於socketio的參考資料https://github.com/socketio/socket.io，
node學習網站：https://nodejs.org/en/
一、項目演示
當服務器端代碼發送數據時，客戶端會接收到代碼，如下圖。
二、項目構建
在構建項目之前必須在自己目錄中增加socketio模塊，如圖所示：命令為npm install socketio
app.js
1 /** 2 * Created by caner on 2016/9/9. 3 * socket.io 4 */ 5 var http = require('http'); 6 var fs = require('fs'); 7 var server = http.createServer(function(req,res){ 8 fs.readFile('./index.html',function(error,data){ 9 res.writeHead(200,{'Content-Type':'text/html'}); 10 res.end(data,'utf-8'); 11 }) 12 }).listen(3000,'127.0.0.1'); 13 console.log('server connection....'); 14 15 var io = require('socket.io').listen(server); 16 io.sockets.on('connection',function(socket){ 17 socket.on('message', function (data) { 18 socket.broadcast.emit('push message',data); 19 console.log(data); 20 }) 21 })
服務端頁面：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>服務端頁面發送數據</title> 6 </head> 7 <body> 8 <form action="http://127.0.0.1:3000"> 9 <textarea id="message" cols="30" rows="5"></textarea> 10 <input type="button" value="發送" onclick="t_push()"> 11 </form> 12 <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script> 13 <script> 14 var socket = io.connect('http://127.0.0.1:3000'); 15 var message = document.getElementById('message'); 16 function t_push(){ 17 socket.emit('message',{text:message.value}); 18 document.getElementById('message').value = ''; 19 } 20 21 </script> 22 </body> 23 </html>
客戶端頁面
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>客戶端頁面</title> 6 <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script> 7 </head> 8 <body> 9 <textarea type="text" id="message"> 10 11 </textarea> 12 <input type="button" value="清除" onclick="f_delete()"> 13 <script> 14 var socket = io.connect('http://127.0.0.1:3000'); 15 socket.on('push message',function(data){ 16 document.getElementById('message').value=data.text; 17 }); 18 function f_delete(){ 19 document.getElementById('message').value=''; 20 } 21 </script> 22 23 </body> 24 </html>
三、項目啟動
打開cmd命令窗口，找到自己app.js所在的目錄，使用命令，node app.js啟動項目。如圖所示：
然后打開自己的網頁，服務端的textare填寫信息，點擊發送，客戶端的網頁就能獲取到。