第七步：发送数据　　

现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

$('#text').keypress(function(event) { 
    if (event.keyCode == '13') { 
        send(); 
    } 
});

下面是send()函数：

function send(){ 
    var text = $('#text').val(); 
    if(text==""){ 
        message('<p class="warning">Please enter a message'); 
        return ; 
    } 
    try{ 
        socket.send(text); 
        message('<p class="event">Sent: '+text) 
    } catch(exception){ 
    message('<p class="warning"> Error:' + exception); 
    } 
    $('#text').val(""); 
}

下面我们需要：

socket.send();

那些额外的代码做了以下工作：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

第八步：关闭Socket　　

关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。

$('#disconnect').click(function(){ 
    socket.close(); 
});

完整JavaScript代码

 $(document).ready(function() { 
  if(!("WebSocket" in window)){ 
  $('#chatLog, input, button, #examples').fadeOut("fast"); 
  $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="Google'>http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container'); 
  }else{ 
      //The user has WebSockets 
      connect(); 
      function connect(){ 
          var socket; 
          var host = "ws://localhost:8000/socket/server/startDaemon.php"; 
          try{ 
              var socket = new WebSocket(host); 
              message('<p class="event">Socket Status: '+socket.readyState); 
              socket.onopen = function(){ 
                 message('<p class="event">Socket Status: '+socket.readyState+' (open)'); 
              } 
              socket.onmessage = function(msg){ 
                 message('<p class="message">Received: '+msg.data); 
              } 
              socket.onclose = function(){ 
                message('<p class="event">Socket Status: '+socket.readyState+' (Closed)'); 
              }          
          } catch(exception){ 
             message('<p>Error'+exception); 
          } 
          function send(){ 
              var text = $('#text').val(); 
 
              if(text==""){ 
                  message('<p class="warning">Please enter a message'); 
                  return ; 
              } 
              try{ 
                  socket.send(text); 
                  message('<p class="event">Sent: '+text) 
              } catch(exception){ 
                 message('<p class="warning">'); 
              } 
              $('#text').val(""); 
          } 
          function message(msg){ 
            $('#chatLog').append(msg+'</p>'); 
          } 
          $('#text').keypress(function(event) { 
              if (event.keyCode == '13') { 
                send(); 
              } 
          });    
          $('#disconnect').click(function(){ 
             socket.close(); 
          });  
      }//End connect 
  }//End else 
});

出处：彬Go
责任编辑：bluehearts

上一页 HTML5 WebSockets基础使用教程 [4] 下一页 HTML5 WebSockets基础使用教程 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。