个人中心
gpt4 book ai didi

node.js - Nodejs Socket 聊天应用程序 : Need to display the online and offline status

转载 作者：太空宇宙 更新时间：2023-11-03 22:46:31 25 4
gpt4 key购买 nike

我刚刚使用 Socket 和 Nodejs 创建了聊天应用程序。

我显示了连接套接字的所有用户。在我的聊天框右侧

现在我需要用户天气的状态离线或在线

这是我使用的代码

index.html

<html>
  <head>
    <title>Socket.IO chat</title>
        <script src="/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <style>
    #chat{
            height:500px;
        }
        #contentWrap{
            display: none;
        }
        #chatWrap{
            float: left;
            border: 1px #000 solid;
        }
        </style>
  </head>
  <body>
    <div id="nickWrap">
        <p>Enter a username:</p>
        <p id="nickError"></p>
        <form id="setNick">
            <input size="35" id="nickname"></input>
            <input type="submit"></input>
        </form>
    </div>

    <div id="contentWrap">
        <div id="chatWrap">
            <div id="chat"></div>
            <form id="send-message">
                <input size="35" id="message"></input>
                <input type="submit"></input>
            </form>
        </div>
        <div id="users"></div>

    </div>

    <script>
            var socket = io.connect();

// add username
        $('#setNick').submit(function(e){
          e.preventDefault();
          socket.emit('new user', $('#nickname').val(), function(data){
            if(data){
              $('#nickWrap').hide();
              $('#contentWrap').show();
            } else{
            $('#nickError').html('That username is already taken!  Try again.');
            }
          });
          $('#nickname').val('');
        });

//list the user who connected
        socket.on('usernames', function(data){
            var html = '';
            for(i=0; i < data.length; i++){
                html += data[i] + '<br/>'
            }
              $('#users').html(html);
        });

//send the message
        $('#send-message').submit(function(e){
          e.preventDefault();
          socket.emit('send message', $('#message').val());
          $('#message').val('');
        });

        socket.on('new message', function(data){
          $('#chat').append('<b>' + data.nick + ': </b>' + data.msg + "<br/>");
        });

    </script>
    </body>
</html>

app.js

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

app.get('/', function(req, res){
    res.sendFile('index.html', { root: 'views'});
});


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

//new user 
    socket.on('new user', function(data, callback){

        if (nicknames.indexOf(data) != -1){
            callback(false);
        } else{
            callback(true);
            socket.nickname = data;
            nicknames.push(socket.nickname);
                console.log('user connected: ' + socket.nickname);
        //  io.emit('update_personal', nicknames + ': Online');

            updateNicknames();
        }
    });

// update all user name

    function updateNicknames(){
        io.sockets.emit('usernames', nicknames);

    }

// send message 

    socket.on('send message', function(data){
    console.log('message: ' + {msg: data, nick: socket.nickname});
        io.sockets.emit('new message', {msg: data, nick: socket.nickname});
    });

//disconnected service

    socket.on('disconnect', function(data){
        console.log('user disconnected:' + socket.nickname )
        if(!socket.nickname) return;
        nicknames.splice(nicknames.indexOf(socket.nickname), 1);
        updateNicknames();
    });

});

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

enter image description here

最佳答案

在你的app.js中:

通过以下方式更改您的昵称数组:

nicknames = {}

然后，对于“新用户”事件，我们需要稍微更改一下您的代码，如下所示:

if (nicknames.hasOwnProperty(data)){ //We check if data received is in nicknames array
    callback(false);
} else{
    callback(true);
    socket.nickname = data;
    nicknames[socket.nickname] = {online: true}; //Then we put an object with a variable online
        console.log('user connected: ' + socket.nickname);
//  io.emit('update_personal', nicknames + ': Online');

    updateNicknames();
}

之后您需要修改断开连接事件:

socket.on('disconnect', function(data){
    console.log('user disconnected:' + socket.nickname )
    if(!socket.nickname) return;
    nicknames[socket.nickname].online = false; //We dont splie nickname from array but change online state to false
    updateNicknames();
});

在您的index.html中:

socket.on('usernames', function(data){
    var html = '';
    for (var nickname in data) //Foreach all nicknames received in data
    {
        var isNicknameOnline = data[nickname].online //Get the online state

        //We test the online status
        if (isNicknameOnline)
        {
            var status = '<font color=green><b>Yes</b></font>'
        }
        else
        {
            var status = '<font color=red><b>No</b></font>'
        }

        html += nickname + ' (Online: ' + status + ')<br/>' //print the status
    }
    $('#users').html(html);
});

然后运行你的app.js并刷新你的index.html。

请注意，您的离线列表不会保存到数据库或文本文件中，因此如果您重新启动 app.js，列表将为空。

关于node.js - Nodejs Socket 聊天应用程序 : Need to display the online and offline status，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35547689/

25 4 0
文章推荐： html - 为什么 z-index 不起作用？
文章推荐： c# - 为什么我的 Sprite 没有移动到第一个路点之外？
文章推荐： python - 为什么我在使用 scikit-image hog 和 OpenCV hog 时没有得到相同的特征描述？
文章推荐： c++ - 使用 QMake 制作独立的 OpenCV 应用程序
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com