HTML 5 WebSocket实现实时视频文字传输(2)

客户端

在支持WebSocket的浏览器中，可以直接在Javascript中通过WebSocket对象来实现通信。WebSocket对象主要通过onopen，onmessage，onclose即onerror四个事件实现对socket消息的异步响应。

请创建静态页面 不用创建ruant=“server”的 否则会自动reload

<!DOCTYPE html> 
 

<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 


    <title></title> 


    <script type="text/javascript"> 


        var wsServer = 'ws://localhost:9999/webSocket.ashx'; //基于.NET4.5服务器地址  


        //var wsServer = 'ws://localhost:1818'; //基于.NET服务器地址  

 

        var websocket = new WebSocket(wsServer); //创建WebSocket对象  

        //websocket.send("hello");//向服务器发送消息  
        //alert(websocket.readyState);//查看websocket当前状态  

        websocket.onopen = function (evt) {  

            //已经建立连接  
            alert("已经建立连接");  
        };  

        websocket.onclose = function (evt) {  

            //已经关闭连接  
            alert("已经关闭连接");  
        };  

        websocket.onmessage = function (evt) {  

            //收到服务器消息，使用evt.data提取  
            evt.stopPropagation()  
            evt.preventDefault()  
            //alert(evt.data);  
            writeToScreen(evt.data);  
            //websocket.close();  
        };  

        websocket.onerror = function (evt) {  

            //产生异常  
            //alert(evt.message);  
            writeToScreen(evt.message);  
        };  
        function sendMsg() {  

            if (websocket.readyState == websocket.OPEN) {  


                msg = document.getElementById("msg").value;  

                websocket.send(msg);  
                writeToScreen("发送成功!");  
            } else {  
                writeToScreen("连接失败!");  
            }  
        }  
 
        function writeToScreen(message) {  

            var pre = document.createElement("p");  


            pre.style.wordWrap = "break-word";  

            pre.innerHTML += message;  
            output.appendChild(pre);  
        }  

    </script> 


</head> 


<body> 


    <div> 


        <input type="text" id="msg" value="beyond is number one!" /> 


        <button onclick="sendMsg()">send</button> 


    </div> 


    <div id="output"></div> 


</body> 


</html> 

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-103122-2.html