javascript socket.io node.js上服务器和客户端的两种通信方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20717076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two way communication between server and client on socket.io node.js
提问by ashok
I am trying to write code for server in node.js in which, client running on browser will send some data to server when some ".on" event will occur. Now at server side the task is to receive data coming from client and send that data back to client.
我正在尝试在 node.js 中为服务器编写代码，其中，当发生某些“.on”事件时，在浏览器上运行的客户端将向服务器发送一些数据。现在在服务器端的任务是接收来自客户端的数据并将该数据发送回客户端。
I am using socket.io. Write now I am doing this as, Client side:
我正在使用 socket.io。现在写我正在这样做，客户端：
<p id="ValSlider1"> Curr Val </p>
<input class = "mySlider1" type="range" name="slider" id="slider-0" value="0" min="0" max="100" />
<script>
var socket = io.connect('http://localhost');
$(".mySlider1").change(function() {
var sVal = $(this).val();
socket.emit('ValSlider1', sVal);
console.log('ValSlider1: ' + sVal );
});
socket.on('packet', function (data) {
var valFromServer = data.split('-');
document.getElementById("ValSlider1").innerHTML = valFromServer[0];
document.getElementById("ValSlider2").innerHTML = valFromServer[1];
document.getElementById("ValSlider3").innerHTML = valFromServer[2];
document.getElementById("ValSlider4").innerHTML = valFromServer[3];
$('#container1').html(data);
});
and on server side:
在服务器端：
var qs = require('querystring'),
fs = require('fs'),
parser = new require('xml2json'),
urr = require('url'),
app= require('http').createServer(handler).listen(3000),
io = require('socket.io').listen(app);
function handler (req, res) {
var reqObj = urr.parse(req.url, true);
var reqPath = reqObj.pathname;
if ('/' == reqPath ) {
res.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile(__dirname + '/client.html', function(err, data) {if (err) {res.writeHead(500);
return res.end('Errorloadingclient.html');
}
res.end(data);
});
}
};
var slider1, slider2, slider3, slider4 ;
io.sockets.on('connection', function(socket) {
socket.on('ValSlider1', function(data){
slider1 = data ;
socket.emit('packet', data);
console.log("Slider 1 Value: " + data);
});
});
setInterval(function () {
var data = slider1 + "-" + slider2 + "-" + slider3 + "-" + slider4;
socket.emit('packet', data);
console.log(data);
},1000);
});
app.maxConnections = 1;
Now, when communication starts initially two-three slider change values are received by server and printed on console but then the values not get updated, server sends previous values only to client. Also, if I use socket.emit('ValSlider1', sVal); twice at client side it works better, but why it require emit twice am unable to find, any help will appreciated. Thanks.
现在，当通信最初开始时，服务器接收两到三个滑块更改值并打印在控制台上，但随后这些值没有更新，服务器仅将先前的值发送给客户端。另外，如果我使用 socket.emit('ValSlider1', sVal); 在客户端两次它工作得更好，但为什么它需要发出两次我无法找到，任何帮助将不胜感激。谢谢。
采纳答案by ashok
I finally managed to do it in this way:
我终于设法以这种方式做到了：
On server side:
在服务器端：
var app = require('http').createServer(handler).listen(3000),
var io = require('socket.io').listen(3001);
var publisher = require('socket.io').listen(app);
On client side:
在客户端：
var socket = io.connect('http://localhost:3001');
var socket2 = io.connect('http://localhost');
The client will send data to server on 'socket'. In response, the server will also send some data on the same port. The server will continuously push data on port 3001 at every second which is received in the client with the ".on('data')" event of server1.
客户端将通过“套接字”向服务器发送数据。作为响应，服务器也会在同一个端口上发送一些数据。服务器将每秒在端口 3001 上不断推送数据，这些数据在客户端通过 server1 的“.on('data')”事件接收。
