Question

我想在客户端浏览器上使用表单输入最佳用户名和密码时，发送用户的用户名。

app.js：

var port=process.env.PORT||3000;

var server = app.listen(port, function(err) {
    if(err) throw err;
    console.log('Server is running @ http://localhost:' + port);
});

var io = require('socket.io').listen(server);

io.sockets.on('connection', function (socket,pseudo) {
    socket.on('new_user',function(pseudo){
        console.log('%s est connecté !!!',pseudo);
    });
});

在index.ejs上我添加了这些行：

<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://localhost:3000');
    var pseudo=user.username;
    socket.emit('new_user', pseudo);
</script>

但是当我运行我的程序时，一切都很好，但我没有收到显示用户已连接到服务器控制台的消息。

signin.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= title %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link type="text/css" rel="stylesheet" href="style/style.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="style/style.css"/>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">HomePage</a>
            </div>
            <div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/signup"><span class="glyphicon glyphicon-log-in"></span> Sign Up</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="jumbotron">
        <h2 align="center">Authentication</h2>
        <div class="form1">
            <form method="post" action="/signin"  class="form-horizontal" role="form" align="center"> 
                <% if(typeof(errorMessage) !== 'undefined') {%>
                <div class="alert alert-danger"><span><%= errorMessage %></span></div>
                <% } %>
                <div class="form-group" >
                    <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
                    <div class="col-sm-6">
                        <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="password">password<em>*</em></label>
                    <div class="col-sm-6">            
                        <input type="password" name="password" id="password" required="true" class="form-control"/> 
                    </div>
                </div>
                <div class="form-group"> 
                    <div class="col-sm-offset-2 col-sm-8">  
                        <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
                    </div>
                </div>      
            </form>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

Answer 1

你可以这样试试。

的node.js

var http = require("http");
var server = http.createServer(handler);
var socket = require("socket.io")(server);

var fs = require('fs');

server.listen(3003)


function handler(req,resp){

    fs.readFile("index.html",function(err,data){
        if(err){
            console.log("error in  loading file.");
            resp.end("failed to load")
        }else{
            resp.writeHead(200);
            resp.end(data)
        }
    })
}


socket.on("connection",function(socket){
    console.log("server is running")

    socket.on("new_user",function(data){
        console.log("here is the username",data)
    })
})

的index.html

<html>
<head>
    <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost:3003');
    var user ="enter your username";
     socket.emit('new_user', user);
</script>
</head>
<body>
    Hello world.!!
</body>
</html>

编辑代码：

var user = {username :'test user'} 
var pseudo=user.username;

编辑代码2：

按如下方式修改HTML。

<ul class="nav navbar-nav navbar-right"> 
    <li>
        <a href="#" id="user_name" username="<%= user.username %>"><%= user.username%></a>
    </li>
</ul>

JS：

<script>
  var socket = io('http://localhost:3003');
    var strUserName =$("#user_name").attr("username")
     socket.emit('new_user', strUserName);
</script>

在nodejs上使用soket.io在服务器和客户端之间建立连接

1 个答案: