html5 websocket聊天室客户端

最新推荐文章于 2024-02-29 17:40:20 发布

wang_feng1984

最新推荐文章于 2024-02-29 17:40:20 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： websocket html5 function textbox socket xhtml

本文链接：https://blog.youkuaiyun.com/wang_feng1984/article/details/7576935

本文提供了一个基于WebSocket技术的示例代码，演示了如何通过JavaScript实现客户端与服务器的实时双向通信。包括连接初始化、消息发送接收及错误处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebSocket</title>
<style>
 html,body{font:normal 0.9em arial,helvetica;}
 #log {width:440px; height:200px; border:1px solid #7F9DB9; overflow:auto;}
 #msg {width:330px;}
</style>


<script>
var socket;


function init(){
  var host = "ws://192.168.1.210:1234/";
  try{
    socket = new WebSocket(host);
    socket.onopen    = function(msg){ ; };
    socket.onmessage = function(event){ log(event.data); };
    socket.onclose   = function(msg){ log("Lose Connection!"); };
  }
  catch(ex){ log(ex); }
  $("msg").focus();
}


function send(){
  var txt,msg;
  txt = $("msg");
  msg = txt.value;
  if(!msg){ alert("Message can not be empty"); return; }
  txt.value="";
  txt.focus();
  try{
    socket.send(msg); 
  } catch(ex){ 
  log(ex); 
  }
}


window.onbeforeunload=function(){
try{ 
socket.send('quit'); 
socket.close();
socket=null;
}
catch(ex){ 
log(ex);
}
};




function $(id){ return document.getElementById(id); }
function log(msg){ $("log").innerHTML+="<br>"+msg; }
function onkey(event){ if(event.keyCode==13){ send(); } }
</script>


</head>
<body onload="init()">
 <h3>WebSocket</h3>
 <br><br>
 <div id="log"></div>
 <input id="msg" type="textbox" onkeypress="onkey(event)"/>
 <button onclick="send()">发送</button>
</body>


</html>