WebSocket的JavaScript客户端

本文通过一个JavaScript例子，解析如何使用WebSocket,代码如下：

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html" />  
    <meta name="author" content="https://www.baidu.com" />  
    <title>websocket test</title>  
    <script>
        var socket;  
        function Connect(){  
            try{  
                socket=new WebSocket('ws://127.0.0.1:9000');  
            }catch(e){  
                alert('error');  
                return;  
            }  
            socket.onopen = sOpen;  
            socket.onerror = sError;
            socket.onmessage= sMessage;
            socket.onclose= sClose;
        }  
        function sOpen(){
            alert('connect success!');
        }
        function sError(e){
            alert("error " + e);
        }
        function sMessage(msg){  
            alert('server says:' + msg);  
        }
        function sClose(e){
            alert("connect closed:" + e.code);
        }  
        function Send(){
            socket.send(document.getElementById("msg").value);
        } 
        function Close(){
            socket.close();
        }  
    </script>
</head>  
   
<body>  
<input id="msg" type="text">  
<button id="connect" onclick="Connect();">Connect</button>  
<button id="send" onclick="Send();">Send</button>  
<button id="close" onclick="Close();">Close</button>

</body>  
   
</html>

主要代码解读：

申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。。

1 2	`var` `wsUri ="ws://127.0.0.1:9000/";` `websocket =` `new` `WebSocket(wsUri);`

WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，

我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

当Browser和WebSocketServer连接成功后，会触发onopen消息;

1 2	`websocket.onopen = function(evt) {` `};`

如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息;

1 2	`websocket.onerror =` `function(evt) {` `};`

当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据;

1 2	`websocket.onmessage =` `function(evt) {` `};`

当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。

1 2	`websocket.onclose =` `function(evt) {` `};`

WebSocket与TCP、HTTP的关系WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。

作者原文地址：https://www.cnblogs.com/jice1990/p/5435696.html

WebSocket的JavaScript客户端

猜你喜欢