您现在的位置是: 网站首页> 前端技术> HTML HTML

HTML5 WebSocket 使用详解以及使用示例

Smile 2021-04-29 PHP HTML Javascript 阅读:861

简介现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询,这样需要不断的向服务器发送请求,非常浪费带宽资源和消耗服务器的性能,HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

1、前端代码使用示例

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 WebSocket 使用详解以及使用示例</title>    
    </head>
    <body>
        <div>
            <button onclick="WebSocketTest();">运行 WebSocket</button>
        </div>
    </body>
    <script type="text/javascript">
        function WebSocketTest() {
            if ("WebSocket" in window){
                alert("您的浏览器支持 WebSocket!");
                
                // 实例化一个 websocket
                var ws = new WebSocket("ws://localhost:9000");
                
                //发送数据
                ws.onopen = function(evt){
                    ws.send("发送数据");
                    console.log("数据发送中...");
                };
                
                //接收数据
                ws.onmessage = function (evt) {
                    var received_msg = evt.data;
                    console.log("数据已接收...");
                };
                
                // 关闭 websocket
                ws.onclose = function(evt) {
                    console.log("连接已关闭...");
                };

                //连接错误
                ws.onerror = function(evt, e) {
                    console.log('error:' + e);
                };
            }else{
                // 浏览器不支持 WebSocket
                console.log("您的浏览器不支持 WebSocket!");
            }
        }
    </script>
</html>

WebSocket 属性

(1) Socket.readyState

0 - 表示连接尚未建立

1 - 表示连接已建立,可以进行通信

2 - 表示连接正在进行关闭

3 - 表示连接已经关闭或者连接不能打开

 

(2) Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数

 

WebSocket 事件

0 - Socket.onopen:连接建立时触发

1 - Socket.onmessage:客户端接收服务端数据时触发

2 - Socket.onerror:通信发生错误时触发

3 - Socket.onclose:连接关闭时触发

 

WebSocket 方法

0 - Socket.send():使用连接发送数据

1 - Socket.close():关闭连接

 

2、服务端代码,这里使用了 PHP 的Swoole扩展编写一个简单的websocket示例

<?php

$server = new Swoole\Websocket\Server('127.0.0.1', 8811);

$server->on('open', function ($server, $req) {
    echo "connection open: {$req->fd}\n";
});

$server->on('message', function ($server, $frame) {
    echo "received message: {$frame->data}\n";
    $server->push($frame->fd, json_encode(['hello', 'world']));
});

$server->on('close', function ($server, $fd) {
    echo "connection close: {$fd}\n";
});

$server->start();

很赞哦! (0)

文章评论

站点信息