如何使用户名也出现在另一个用户处?

时间:2019-01-20 19:30:58

标签: javascript socket.io

页面加载时,必须输入用户名。当我在窗口中发送消息时,用户名显示为应有的状态,但是当我在另一个窗口中发送消息时,用户名保持不变,因为它是本地用户名。

我试图创建一个带有“ txt”参数的函数,但这不起作用。

第1部分:

var txt;
    function usereingabe() {
        var user = prompt("Please enter your name:");
        if (user == null || user == "") {
            txt = alert("Ungültige Eingabe");
        } else {
            txt = user;
        }
    }

    $(function () {
      var socket = io();
      $('form').submit(function(e){
        e.preventDefault();
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(txt + ": " + msg));
      });
    });

第2部分:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
      io.emit('chat message', txt + ": " + msg);
    });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

function newFunction() {
  function (txt) {
    var user = prompt("Please enter your name:");
    if (user == null || user == "") {
        txt = alert("Ungültige Eingabe");
    }
    else {
        txt = user;
    }
}
}

它始终显示您在“提示”处输入的用户名。

2 个答案:

答案 0 :(得分:1)

您的代码存在很多问题,因此我重写了很多代码并提高了可读性

index.js

<html>
  <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <div id="messages"></div>
  <form>
    <input type="text" id="m"></input>
    <input type="submit"></input>
  </form>
</html>
<script>
var socket = io();
var txt;
var user = prompt("Please enter your name:");
  if (user == null || user == "") {
      txt = alert("Ungültige Eingabe");
  } else {
    txt = user;
  }


    function usereingabe() {
    }

    function sendMessage(){
      message = $('#m').val()
      socket.emit('chatMessage', user, message);
      $('#m').val('');
      return false;
    }

      $('form').submit(function(e){
        e.preventDefault();
        sendMessage();
      });

      socket.on('chatMessage', function(user, message){
        $('#messages').append('<li><b>'+user+': <b>'+message+'</li>');
      });

    </script>

server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('chatMessage', function(user, msg){
      console.log(user +": " + msg)
      io.emit('chatMessage', user, msg);
    });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

一些指针

io.emit('chatMessage', user, msg);并不是一个好习惯,您只需要传递变量而不对表达式中的文本设置格式

您需要命名这样的想法,例如chatMessage而不是chat message,以避免以后出现可能的问题

答案 1 :(得分:-1)

我通过拆分解决了这个问题。

    var txt;
    function usereingabe() {
        do{
            var user = prompt("Please enter your name:");
        if (user == null || user == "") {
            txt = alert("Ungültige Eingabe");
        } else {
            txt = user;
        }
        }while(user == null || user == "");
    }

    $(function () {
      var socket = io();
      $('form').submit(function(e){
        e.preventDefault();
        socket.emit('chat message', txt + ":==:" + $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
          var username = msg.split(":==:")[0]
          var nachricht = msg.split(":==:")[1]
        $('#messages').append($('<li>').text(username + ": " + nachricht));
      });
    });