Question

我想制作一个用户列表，并有一个图像显示他们的在线状态，但我无法找到合适的选项来使用常规的html选择标签。我也希望能够为每个用户提供选项，但这对我来说不是问题。

如果我的解释不是很好，我已经创建了一个图像来帮助想象我想要得到它的内容。我希望能够动态更改图片/状态指示器（无需刷新页面或在客户端执行某些操作）。

如果用户列表没有硬编码到html中，有没有办法为每个用户设置图片？（用户将从数据库查询中放入列表中）

注意：如果有帮助，我使用Node.js和socket.io作为在线部分。

图片供参考：

enter image description here

编辑：来自我正在处理的网站的类似用户列表设计的JSFiddle（无法直接链接到网站，它不是外部连接的服务器）：http://jsfiddle.net/Blubberguy22/LN45a/28/

HTML：

<body>
    <div id="usersOptions" style="background-color: #ddeeff; left: 0; top: 0; position:absolute; 
height:260px; width:230px; border-style:inset; 
border-width: 0px; margin: 0; z-index: 300; "> <strong>Users Online:</strong>

        <select id='userList' style="width: 100%; height: 100%;" multiple></select>
        <button id='makeFakeUser' onclick="addUser();">AddUser</button>
</body>

使用Javascript：

function addUser() {
    //In actual code gets users from connections within socket.io
    var option = document.createElement("option");
    option.text = "A person";
    userList.add(option);
}

为了澄清，我不需要帮助获取用户的在线状态，而是将状态指示器放在列表旁边。

Answer 1

这里最简单的解决方案似乎是让每个客户端为服务器创建一个WebSocket，让服务器在用户上线或下线时发送事件。

要实际更改图像，您可以执行以下操作：

joesNumber=22;
WebSocket.onmessage=function(event){
    data=JSON.parse(event.data);
    //Interpret data here
    document.getElementsByClassName("onlineIndicator")[joesNumber].src="./fancyIndicatorImage.png.jpg";
}

创建具有状态图片的用户列表

1 个答案: