Javascript 如何在套接字事件上呈现新的jade视图？

我有两个主要的js文件，一个在服务器端是

server.js

，另一个在客户端是

enterchat.js

。这两个文件将通过socket.io进行通信。所有套接字事件都按预期工作

server.js

var express = require('express'),
...
server = require('http').createServer(app),
io = require('socket.io').listen(server);

var usernames = [],
    username_sockets = [];

...

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use('/', express.static(__dirname+'/public/'));

app.get('/chat', function (req, res) {
    res.render('checkUsername', {title:'Socket IO Chat'});
});

app.get('/chatwindow', function (req, res) {
    res.render('chatwindow', {title:'Welcome to chat window'});
});

io.sockets.on('connection', function (socket) {

    socket.on('disconnect', function () {
        ...
        delete username_sockets[socket.id];
        console.log("Disconnected from " + user);
    });

    socket.on('newusr', function (newusrname) {
        console.log("New user name request:: " + newusrname);
        if(usernames.indexOf(newusrname) >= 0)
        {
            console.log("Already used username..");
            socket.emit('usernameTaken', newusrname);
        }
        else
        {
            socket.emit('usernameavlbl', newusrname);
        }
    });

    socket.on('startchat', function (usernameAvailable) {
        if(usernames.indexOf(usernameAvailable) >= 0)
        {
            console.log("Just taken username..");
            socket.emit('usernameJustTaken', usernameAvailable);    //returning the username that was just taken
        }
        else
        {
            usernames.push(usernameAvailable);
            console.log("Opening chat window for "+usernameAvailable);
            username_sockets[socket.id] = usernameAvailable;

            //  trying to render jade view to open chatwindow on socket event
        }
    });

    socket.on('sndmsg', function (message) {
        socket.broadcast.emit('msgreceive', message, username_sockets[socket.id]);
    });

    socket.on('typing', function (username) {
        socket.broadcast.emit('usertyping', username);
    });

    socket.on('stoppedtyping', function (username) {
        socket.broadcast.emit('userstoppedtyping', username);
    });
});

server.listen(8080,'0.0.0.0');
console.log("Listening on 8080..");

enterchat.js

var socket, usernameAvailable;

    $(document).ready(function () {
        connect();

    ...

    ...

    $('#checkBtn').on('click', function(event) {
        if($('#username').val() == '')
            alert("Choose a username");
        else
        {
            var newusrname = $('#username').val();
            socket.emit('newusr', newusrname); 
        }
    });

    ...

    socket.on('usernameTaken', function (message) {
        alert(message + " is already taken. Try another one..");
    });

    socket.on('usernameJustTaken', function (message) {
        alert(message + " was just taken. Try another one..");
    });

    socket.on('usernameavlbl', function (newusrname) {
        $('#chataway').attr('disabled', false);
        usernameAvailable = newusrname;
    });

    $('#chataway').on('click', function () {
        socket.emit('startchat', usernameAvailable);
    });
    });

    function connect () {
        socket = io.connect(null);
    }

我的问题：如何在socket事件

startchat

上呈现

聊天窗口

视图

---

我看了这个问题：，但我不确定如何将它添加到我的代码中，以便在浏览器上加载一个新的jade视图（聊天窗口）。您可以使用jade api的

compileFile

方法，获取html，然后发出一个包含html数据的套接字事件。您可以将该html附加到DOM中

socket.on('startchat', function (usernameAvailable) {
    if(usernames.indexOf(usernameAvailable) >= 0)
    {
        console.log("Just taken username..");
        socket.emit('usernameJustTaken', usernameAvailable);    //returning the username that was just taken
    }
    else
    {
        usernames.push(usernameAvailable);
        console.log("Opening chat window for "+usernameAvailable);
        username_sockets[socket.id] = usernameAvailable;

        var fn = jade.compileFile('path to jade file', options);

        // Render function
        var html = fn();

        // Now you can send this html to the client by emitting a socket event

    }
});

---

你好谢谢你的回复。是的，发出呈现的HTML效果很好。但这会打开一个新连接（使用一个新的

socket.id

），使旧连接保持活动状态。我使用

socket.id

存储用户名，这意味着我将无法使用

username\u sockets[socket.id]=usernameavable在
server.js
中。因为它是一个新的socket.id，所以我得到了
未定义的
。我想获取第一次连接时存储在数组中的
usernameavable
。使用“usernameavable.from”获取传入消息的套接字id。