html-socket-client/socket-client.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
	<title>WebSocketClient</title>
</head>
<body>
<script>

	var btnSend    ;
	var status     ;
	var receiveTxt ;
	var sendTxt    ;
	var wsObj ;

   window.onload = function(){
	 btnSend = document.getElementById("btnSend");
	 status = document.getElementById("status");
	 receiveTxt = document.getElementById("receive");
	 sendTxt = document.getElementById("send");

    // wsObj = new WebSocket("ws://192.168.88.129:11200");   //建立连接
    wsObj = new WebSocket("ws://127.0.0.1:11200");   //建立连接
    wsObj.onopen = function(){  //发送请求
    	var status = document.getElementById("status");
        status.innerHTML = "连接状态： 已连接";
        status.style.color = "green";
    };
    wsObj.onmessage = function(ev){  //获取后端响应
        receiveTxt.value = receiveTxt.value + "\r\n\r\n" + ev.data; 
    };
    wsObj.onclose = function(ev){
        //alert("close");
    };
    wsObj.onerror = function(ev){
       //alert("error");
    };

   }


    function snedMessage() {
    	var str = sendTxt.value;
    	wsObj.send(str);
    }
</script>

<div>
	<label id="status" style="color: rgb(255,0,0)">连接状态： 未连接</label> 
</div>

<div>
	<p>接收</p>
	<textarea  name="" id="receive" style="width: 300px;height: 300px"></textarea>
</div>
<div>
	<p>发送区</p>
	<input type="text" name="" id="send" style="width:300px" />
	<br/>
	<br/>
	<input type="button" id="btnSend" value="发送"