WebSocket学习(二)——使用官方的服务器实现WebSocket

之前文章讲了一下WebSocket的原理等等，那在html中怎么使用WebSocket呢为了方便，我们先使用WebSocket官方的服务器，html5中能直接使用WebSocket的APIindex.htmlWebSocketEcho Test发送// //官方示例的服务

小小小西瓜_

2378人浏览 · 2017-09-18 16:33:00

小小小西瓜_ · 2017-09-18 16:33:00 发布

之前文章讲了一下WebSocket的原理等等，那在html中怎么使用WebSocket呢

为了方便，我们先使用WebSocket官方的服务器，html5中能直接使用WebSocket的API

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket</title>
</head>
<body>
    <h1>Echo Test</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        // //官方示例的服务器
        var WebSocket = new WebSocket("ws://echo.websocket.org");
        WebSocket.onopen = function(){
            console.log('websocket open');
            document.getElementById("recv").innerHTML = "Connected";
        }
        WebSocket.onclose = function(){
            console.log('websocket close');
        }
        WebSocket.onmessage = function(e){
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;
        }
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;
            WebSocket.send(txt);
        }
    </script>
</body>
</html>

代码说明：

1、ws取代了平时的http，代表用的是WebSocket协议

2、onopen API 服务器启动时的触发的事件

3、onclose API 服务器关闭时触发的事件

4、onmessage API 服务器发消息触发的事件

5、WebSocket是建立的一个连接，send（）方法使用连接发数据，close（）方法关闭连接

这就是一个简单的客户端使用WebSocket的小例子，服务器是官方的服务器，下一节说说自己搭建的服务器