如何在socket.io/node.js/Express生成器聊天中添加用户名

时间:2016-09-27 07:02:39

标签: javascript node.js socket.io

如何为每个与我的快速生成器(ejs)聊天加入聊天的人添加用户名?我已经能够设置套接字io,但我正在努力添加不同的用户名。

index.ejs:



<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /*body { font: 13px Helvetica, Arial; }*/
        /*body { font: 13px Helvetica, Arial; background-color: red;}*/

        #sendme {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        #sendme input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: .5%;
        }

        #sendme button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages li {
            padding: 5px 10px;
        }

        #messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
</head>

<body>
    <ul id="messages"></ul>
    <form id="sendme" action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <div class="span5 offset2" id="login">
        <form class="form-inline">
            <input type="text" class="input-small" placeholder="Your name" id="name">
            <input type="button" name="join" id="join" value="Join" class="btn btn-primary">
        </form>
        <script src="/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            var socket = io();
            $("#sendme").submit(function() {
                socket.emit('chat message', $('#m').val());
                $('#m').val('');
                return false;
            });

            socket.on('chat message', function(msg) {
                $('#messages').append($('<li>').text(msg));
            });
        </script>
</body>

</html>
&#13;
&#13;
&#13;

index.js:

&#13;
&#13;
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', {
        title: 'Express'
    });
});

module.exports = function(io) {
    var app = require('express');
    //var router = app.Router();

    io.on('connection', function(socket) {
        console.log('a user connected');
        io.emit('chat message', "A user connected.");
        socket.on('chat message', function(msg) {
            console.log('message: ' + msg);
            io.emit('chat message', msg);
        });

        socket.on('disconnect', function() {
            console.log('user disconnected');
            io.emit('chat message', "A user disconnected.");
        });
    });

    return router;
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

连接时会触发事件 connect ,您可以并且应该将socket.on(&#39; connect&#39;)添加到index.html文件中,然后您可以在其中发送用户名:

的index.html

socket.on('connect', function() {
  socket.emit('newuser', 'Marchhill');
};

套接字是对象,因此您可以在index.js中添加socket.username:

index.js

socket.on('newuser', function(username) {
  socket.username = username;
  console.log( socket.username + ' has connected');
};