[英]socket.io / parameters on connection
在我的node.js / Express.js应用程序中,我需要使用socket.io连接传递参数(在另一篇文章中看到)。
在客户端,我有类似的东西:
编辑
var socket = io.connect('/image/change', {query:"name=my_img_name"});
var siofu = new SocketIOFileUpload(socket);
siofu.listenOnInput(document.getElementById("change_image_inpt"));
在服务器端:
编辑
io.of('/image/change')
.on('connection', function (socket) {
console.log('log input param : ' + socket.handshake.query.name);
});
但是在控制台中什么都没有
还有另一种方法可以实现吗?
EDIT2
这是客户端的完整代码:
$(document).ready(function() {
// icon_action_modal
$('.icon_actions').on('click', function() {
// set icon preview
$('#icon_action_modal_icon_preview').html('<img src="/upload/icon/' + $(this).data('icon') + '.png" />');
// set icon to delete
$('#icon_name').val($(this).data('icon'));
// set Change icon socket
var socket = io.connect('/icon_sets/change', {query:"name=my_img_name"});
var siofu = new SocketIOFileUpload(socket);
siofu.listenOnInput(document.getElementById("change_icon"));
// Do something when a file is uploaded
siofu.addEventListener("complete", function () {
$('.overlay').hide();
});
// display loader window
socket.on('displayOverlay', displayOverlay);
// display
socket.on('displayIconImage', function (data) {
$('#iconset_render').append('<div class="icon"><img src="' + data.path + '" /></div>');
});
socket.on('setIconsetArray', function (data) {
var iconset = ($('#iconset_array').val()) ? JSON.parse($('#iconset_array').val()) : [];
iconset.push(data.iconName);
$('#iconset_array').val(JSON.stringify(iconset));
deleteIcon($('#icon_name').val());
// close modal
$('#icon_action_modal').modal('hide');
});
});
$('#icon_action_modal_delete_icon').on('click', function() {
deleteIcon($('#icon_name').val());
// close modal
$('#icon_action_modal').modal('hide');
});
}); // end document.ready
以及服务器端的完整代码:
io.of('/icon_sets/change')
.on('connection', function (socket) {
console.log('log input param : ' + socket.handshake.query.name);
functions.socketImageTransfer(socket, 'icon', 65, 65);
});
使用socketImageTransfer
函数:
module.exports.socketImageTransfer = function(socket, type, width, height, name) {
var socketioFileUploadServer = require('socketio-file-upload'); // upload files by socket
var config = require(__dirname + '/config/config.json');
var easyimg = require('easyimage'); // crop - resize image
var fs = require('fs'); // file system access
// Make an instance of socketioFileUploadServer and listen on this socket:
var uploader = new socketioFileUploadServer();
uploader.dir = config.tmpDir;
uploader.listen(socket);
// Do something when a file is saved:
uploader.on('saved', function (event) {
console.log('Original ' + type + ' saved');
// resize and rename image with a unique id
var newName;
if (!name) {
newName = Math.random().toString(36).substr(2, 9) + '_' + type + '.png';
} else {
newName = name;
}
var fileName = event.file.name.replace(/ /g, '_');
easyimg.rescrop({src: config.tmpDir + fileName, dst: config.uploadDir + type + '/' + newName, width: width, height: height}, function (err, image) {
if (err) return console.log(err);
console.log(type + ' resized and cropped: ' + image.width + ' x ' + image.height);
// image is uploaded - resized - croped, now display it
socket.emit('display' + ucfirst(type) + 'Image', {path: '/upload/'+ type + '/' + newName});
// remove original from file system
fs.unlink(config.tmpDir + fileName, function () {
if (err) throw err;
console.log('Original ' + type + ' removed');
});
// additionnal action
switch(type) {
case 'icon':
// send path to generate iconset_json
socket.emit('setIconsetArray', {iconName: newName});
break;
}
});
});
uploader.on('start', function (event) {
console.log('Client start upload');
socket.emit('displayOverlay');
});
// Error handler:
uploader.on('error', function (event) {
console.log("Error from uploader", event);
});
};
感谢您的帮助
就在这里。
1) query
就像GET
参数一样,所以用"param=value"
替换"param:value"
(如果你想传递多个参数,就像你通常用URL做的那样: param=value&some_other_param=test
)
2)在connection
处理程序中获取查询参数的方法更简单,更可靠(因为没有访问handshaken
对象的未定义属性的风险)的方法:
console.log(socket.handshake.query.param);
编辑:
在学习完整代码后,我想我找出了导致问题的原因。 问题是你可能误解了Socket.IO命名空间的主要思想。
我想你在一个页面内有多个Socket.IO连接( io.connect
调用),对吗? 通常单个连接就足够了。 你的错误是你在鼠标事件上调用io.connect
,但你应该在document.ready
上调用一次,然后只是emit
ting。
看一下下面的代码(客户端):
$(document).ready(function() {
var socket = io.connect('', {query: 'name=something'});
// [...]
socket.on('some_event_from_server', function(data, cb) {});
// [...]
$('#someButton').click(function() {
socket.emit('markers_add', {some: 'data'}); //send `markers_add` message to server within main namespace
});
$('#someOtherButton').click(function() {
socket.emit('icon_sets_add', {some: 'thing'}, function(response) {
//server may response to this request. see server side code below
});
});
});
服务器端代码:
io.on('connection', function(socket) { //connection handler of main namespace
socket.on('markers_add', function(data) { /* ... */ });
socket.on('icon_sets_add', function(data, cb) {
// do something
cb({some: 'response'});
});
// [...]
socket.emit('some_event_from_server', {}); //server sends a message to a client
//BTW, now it should be OK:
console.log(socket.handshake.query.name);
});
如果你有一个命名空间,它应该工作。 我实际上不知道它是否是Socket.IO的错误或者是由于命名空间的使用不当造成的,但修改代码只能创建一个命名空间应该可以解决问题。
因此,在您的情况下,您根本不必在握手时传递查询参数。
实际上,如果您想让您的应用更安全,您必须使用查询参数。 请参阅http://wlkns.co/node-js/socket-io-authentication-tutorial-server-and-client/ (对于Socket.io 0.9)
希望我的回答可以帮到你。 祝好运!
这就是我所做的。
客户
var socket = io.connect('http://localhost:8890',{ query: "foo=bar" });
服务器
io.on('connection', function (socket) {
console.log(socket.handshake.query['foo']);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.