socket.io建立长连接
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这个字符串,这个相当这段消息的名字,只能接收同一个名字的消息