使用websockets在聊天中链接名称

时间:2014-05-31 08:02:32

标签: javascript websocket chat

我正在尝试使用聊天教程http://www.sanwebe.com/2013/05/chat-using-websocket-php-socket解决此问题。我试图创建锚点,如果点击它将转到每个用户配置文件。问题是在使用多个用户进行测试期间,链接仅指向房间中的第一个用户。我花了相当多的时间试图解决这个问题。 如何获得单独的可点击链接? 我正在使用CodeIgniter与控制器处理的链接。我无法理解如何在此结构中执行任何循环或while语句。

  

带有HTML的Javascript

websocket.onmessage = function(ev) {
    var msg = JSON.parse(ev.data); //PHP sends Json data
    var type = msg.type; //message type
    var umsg = msg.message; //message text
    var uname = msg.name; //user name
    var ucolor = msg.color; //color

    if(type == 'usermsg') 
    {
        $('#message_box').append("<div><span class=\'user_name\'       style=\'color:#'+ucolor+'\"><button type='button' class='greenButton' onclick='proceed()' id='mem_name' value='"+uname+"'>"+uname+"</button></span> : <span class=\"user_message\">"+umsg+" </span></div>" );

    }`
  

JS功能

function proceed (button) {
    var mem_name = $('#mem_name').val();
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', 'member_chat');
    form.style.display = 'hidden';
    form.setAttribute("target", "formresult");

    var hiddenField = document.createElement("input");      
    hiddenField.setAttribute('name', 'mem_chat');
    hiddenField.setAttribute('value', mem_name)
    form.appendChild(hiddenField);
    document.body.appendChild(form)
    form.submit();
}

1 个答案:

答案 0 :(得分:0)

在较高级别,您的问题是所有插入的按钮都具有相同的ID mem_name。 ID必须是唯一的,因此$("#mem_name")在找到第一个mafch后停止。

此处的快速解决方法是在您的内联点击侦听器中传递this

onclick="proceed(this)"

并使用$(button)(即参数proceed)代替$("#mem_name")

更优雅的解决方案是消除内联侦听器并使用jQuery的.on委派。将id=mem_name更改为class=mem_name,删除onclick侦听器,并添加此代码以仅运行 (即,不在消息事件侦听器中):< / p>

$("#message_box").on("click", ".mem_name", proceed);

然后将$("#mem_name")更改为$(this)。只要在proceed内点击具有mem_name类的元素,这将导致#message_box运行。