当前位置: 首页 > 面试题库 >

socket.io /连接参数

计燕七
2023-03-14
问题内容

在我的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);
});

但是控制台中什么也没有。

还有另一种方法可以实现吗?

编辑2

这是客户端的完整代码:

$(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)handshakenconnection处理程序中获取查询参数有一种更简单,更可靠的方法(因为没有访问对象的未定义属性的风险):

console.log(socket.handshake.query.param);

编辑:

学习完完整的代码后,我想我找出了导致问题的原因。问题是您可能误解了Socket.IO名称空间的主要思想。

我猜您io.connect在一页内有多个Socket.IO连接(调用),对吗?通常,一个连接就足够了。您的错误是您调用io.connect了鼠标事件,但是您应该在上调用一次document.ready,然后才发出emit声音。

看下面的代码(客户端):

$(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)

希望我的回答对您有所帮助。祝好运!



 类似资料:
  • 问题内容: 在生产中,我有一个使用连接局部变量保存游戏状态的游戏。但是,我注意到,如果我在连接上闲置了一段时间,它将断开连接并重新连接,这将丢失当前状态。在本地主机上进行测试时,我从未注意到此行为。这是套接字连接的规范行为,还是导致连接断开的其他原因。 如果是正常行为,通常如何处理?是否应该将连接值全局存储,以便用户断开/重新连接时可以恢复连接值? 问题答案: 您的问题与套接字超时有关。如果某个套

  • 因为Websockets构建在TCP之上,所以我的理解是,除非端口在连接之间共享,否则您将受到64K端口限制的约束。但我也看到过使用Gretty进行512K连接的报告。所以我不知道。

  • 使用带有socket.io的nodejs服务器和客户机,我可以让14K个客户机进行连接。即使在使用集群时也略少。 CPU和RAM都没有耗尽。除了socket.io自己执行的自动ping之外,不会传输任何数据。 如果机器不够强大,我可以理解。但是,我希望服务器无论如何都会随机删除客户端,而不是每次尝试时都保持特定的数量。 编辑:这是在Windows上使用网络Storm,我会在Linux机器上测试,当

  • 问题内容: 我有一个使用socket.IO的node.js应用程序。它可以在http上正常工作,但是当尝试通过https连接到套接字时,没有任何反应。 这是代码的一部分: 和功能: 客户端连接如下: 正如我说的,在http上一切正常,但是在https上连接会给我“连接被中断”。我究竟做错了什么? 问题答案: 您不能像服务器那样初始化服务器。您必须启动一个单独的https服务器,然后将socket.

  • 我有这个演示设置: > 节点.js在端口 8001 上运行的 WebSocket 服务器 #1(使用“socket.io”) 节点。js WebSocket服务器#2(使用'socket.io')在端口8002上运行 在端口 8000 上运行的 nginx websocket 反向代理: node.js客户端(使用socket.io客户端,而不是浏览器JavaScript客户端)尝试连接到服务器#

  • 问题内容: 如标题所述,我尝试将socket.io 1.0.4与express 4.2一起使用,并且所有请求都返回404。 以下是我的文件: ./bin/www: ./app.js: 问题答案: 我在文件上摆弄了很多东西,然后开始工作,这是我如何开始工作的: ./bin/www: 需要保留require app.js ,否则将无法正常工作。 ./app.js: 所有这一切都对 WWW 放在这里,最