井井客

搜索

一个简单的WebSocket连接

囫囵学习了下WebSocket,客户端代码还是满简单的。

一个简单的WebSocket连接

参考链接:http://www.ruanyifeng.com/blog/2017/05/websocket.html

概念啥的请阅读上面参考链接的网址,自己练习的一小段代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="btn" disabled>点击触发事件</button>
    <script>
        // 创建WebSocket实例
        var ws = new WebSocket("wss://echo.websocket.org");
        console.log(ws.readyState)
        // 连接成功后
        ws.onopen = function () {
            // 触发事件
            console.log("连接成功~准备好了可以点击了");
            var btn = document.getElementById("btn");
            btn.disabled = false;
            btn.onclick = function () {
                // 向服务器发送数据
                ws.send("操作于:" + new Date());
            }
        }
        // 接受服务器数据
        ws.onmessage = function (event) {
            console.log(event.data);
            // (不需要连接时可以)手动关闭
            // ws.close();
        };
        // 连接关闭
        ws.onclose = function (evt) {
            console.log("连接关闭");
        };
    </script>
</body>
</html>

运行例子可以整理出来明显的几点内容:

(1)通信由客户端发起
(2)使用ws或wss协议
(3)长连接 [断线重连后依然可以连上,并且未向服务器发送成功的数据请求不会丢失而会继续执行]
(4)连接成功触发open事件
(5)通过send事件由客户端向服务器传递数据
(6)服务器向客户端传递数据时触发message事件
(7)通过close事件关闭WebSocket连接
(7)WebSocket连接关闭时触发close事件

服务器端设置还没有弄过,以后有机会再学吧~

文章TAG:JS

作者:井井客整理来源:原创
本文标题:一个简单的WebSocket连接
本文链接:/c/27341.html

上一篇:多个标签页之间通信(cookie、localStorage)
下一篇:WebSocket与Http和Https的区别

文章分类

相关阅读

随便看看