socket.io是基於node.js,在命令行里輸入npm socket.io下載模塊,用node.js搭建后台
示例代碼,客戶端
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Node.js</title> 6 <script type="text/javascript" src="/socket.io/socket.io.js"></script> 7 </head> 8 <body> 9 歡迎進入<br><br> 10 <input type="button" value="向服務器發送消息" onclick="sendMyMessage()"><br> 11 <input type="button" value="提醒服務器給我發送信息" onclick="sendMessage()"><br> 12 </body> 13 </html> 14 15 <script type="text/javascript"> 16 17 //和服務器建立長連接 18 var socket = io.connect('/'); 19 20 //向服務器端發送自定義消息 21 function sendMyMessage(){ 22 socket.emit('custom', '我是客戶端的消息'); 23 } 24 25 function sendMessage(){ 26 socket.emit('server', '我是客戶端,給我發送一個信息'); 27 } 28 29 //接收服務器推送來的消息 30 socket.on('system', function(data){ 31 alert(data) 32 }); 33 //接收服務器推送來的消息 34 35 var num1 = 0; 36 37 socket.on('test1', function(data){ 38 num1++ 39 console.log(data+num1) 40 }); 41 42 43 //和服務器建立長連接 44 //socket.on('connect', function(){}); 45 </script>
服務器端代碼
1 //初始化系統庫(引包) 2 var express = require('express'); 3 var app = express(); 4 var server = require('http').createServer(application); 5 //引入socket.io這個包 6 var socketio = require('socket.io')(server); 7 var path = require("path"); 8 //加載前端文件index.html 9 10 //設置靜態路徑 11 app.use(express.static(path.join(__dirname, "views"))); 12 app.get('/index', function(request, response){ 13 response.sendFile('./views/index.html'); 14 }); 15 16 //監聽用戶連接事件 17 socketio.on('connection', function(socket){ 18 //設置房間,獲取用戶當前的url,從而截取出房間id 19 //var url = socket.request.headers.referer; 20 21 //接收客戶端發送來的消息 22 socket.on('custom', function(data){ 23 console.log(data)//我是客戶端自定義的消息 24 }); 25 26 socket.on('server', function(data){ 27 //向客戶端發送消息 28 socket.emit('system', 'hello!客戶端') 29 }); 30 31 }); 32 server.listen(9004);
注:服務器端和客戶端都用socket.emit()發送消息;socket.on()接收消息
服務器端:socket.emit('system', 'hello!客戶端')
客戶端:socket.on('system', function(data){
alert(data)
});
這兩段代碼對應,服務器發送消息,客戶端接說消息
關鍵在於system這個字符串,這個相當這段消息的名字,只能接收同一個名字的消息