如何在套接字事件中呈现新的玉视图?

我有两个主要的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); } 

我的问题:如何在套接字事件startchat呈现chatwindow视图?

我看了这个问题: 在Express.js中,如何渲染不带“响应”对象的Jade局部视图? ,但我不确定如何将其添加到我的代码中,以便在浏览器上加载新的玉视图(chatwindow)。

  • Socket.io触发多个事件
  • 定期检查和清理服务器中的文件
  • 如何发送JSON中的ArrayBuffer从js客户端到nodejs服务器?
  • 套接字挂在dnode中
  • Node.js,Socket.io:如何获取客户端浏览器的语言?
  • node.js + express + socket.io与ipv6?
  • Socket.io私人消息通知
  • 与socket.io配对 - 依靠setInterval或套接字调用?
  • 你可以使用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 } });