HTML中绑定键盘回车键（Enter），触发发送WebSocket消息动作

源码资源网

HTML中绑定键盘回车键（Enter），触发发送WebSocket消息动作

1. <script type="text/javascript">
   
2.         //监控键盘Enter 回车键按下的动作
   
3.         document.onkeydown = function(e){
   
4.             if((e||event).keyCode==13)
   
5.                 sendMsg();
   
6.         };
   
7.         ///////////////ws创建&监控接收消息处理动作/////////////////////////
   
8. 
   
9.         //创建ws协议连接，创建出来后就已经和服务端建立连接
   
10.         var ws = new WebSocket("ws://127.0.0.1/chat?username={{current_user}}");
    
11.         /////////////////////收到WebSocket消息//////////////////////////
    
12.         ws.onmessage = function(recv) {
    
13.             // $("#contents").append("<p>" + recv.data + "</p>"); //jquery 向div中添加内容
    
14. 
    
15.             var div = document.getElementById('contents');
    
16.             div.innerHTML = div.innerHTML  +  recv.data + '<br>';
    
17.             div.scrollTop = div.scrollHeight; //当前div的滚轮始终保持最下面
    
18. 
    
19.         };
    
20.         ////////////////////发送WebSocket消息////////////////////////
    
21.         function sendMsg() {
    
22.             $('#msg').val($('#msg').val().trim());//去除输入前后的空格
    
23.             var msg = $("#msg").val();
    
24.             if ( msg && msg.length >0) {
    
25.                 data = {
    
26.                     // username:username,
    
27.                     msg:msg
    
28.                 };
    
29.                 ws.send(JSON.stringify(data));
    
30.                 $("#msg").val("");
    
31.             }else {
    
32.                 console.log('内容不许为空')
    
33.             }
    
34.         }
    
35.     </script>

复制代码