Swoole学习之网络通信引擎WebSocket服务五

jiezi

5 年前

WebSocket 协议 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工 (full-duplex) 通信 -允许服务器主动发信息给客户端。

为什么需要 WebSocket?
缺陷：HTTP 的通信只能由客户端发起

WebSocket 的特点：

建立在 TCP 协议之上
性能开销小通信高效
客户端可以与任意服务器通信
协议标识符 ws wss
持久化网络通信协议

ws_server.php

<?php

// 创建 websocket 服务器对象，监听 0.0.0.0:80 端口
$ws = new swoole_websocket_server("0.0.0.0", 80);

// 监听 WebSocket 连接打开事件
$ws->on('open', function ($ws, $request) {var_dump($request->fd, $request->get, $request->server);
    $ws->push($request->fd, "hello, welcome\n");
});

// 监听 WebSocket 消息事件
$ws->on('message', function ($ws, $frame) {echo "Message: {$frame->data}\n";
    $ws->push($frame->fd, "server: {$frame->data}");
});

// 监听 WebSocket 连接关闭事件
$ws->on('close', function ($ws, $fd) {echo "client-{$fd} is closed\n";
});

$ws->start();

因为我们是在 docker 容器中，所以，我们使用 80 端口，这样可以在宿主机通过之前做的端口映射，就可以在宿主机浏览器访问该服务。

宿主机容器映射的端口查看：

➜  ~ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                                        NAMES
5ee6bfcc1310        7698f               "/bin/bash"         46 hours ago        Up 30 hours         0.0.0.0:2221->22/tcp, 0.0.0.0:8880->80/tcp   confident_jones

静态页面路径：/work/study/code/swoole/demo/static

ws_client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket TEST</title>
</head>
<body>
<h1>Swoole-TEST</h1>
<script>
    var wsUrl = "ws://0.0.0.0:8880";
    var websocket = new WebSocket(wsUrl);

    // 实例化 onopen 对象
    websocket.onpen = function(evt){console.log("connected-swoole-success")
    }

    // 实例化 onmessage
    websocket.onmessage = function(evt){console.log("ws-server-return-data"+evt.data)
    }

    // 实例化 onclose
    websocket.onclose = function(evt){console.log("close")
    }

    // onerror
    websocket.onerror = function (evt) {console.log("error:" + evt.data)
    }


</script>

</body>
</html>

宿主机浏览器访问：

Swoole学习之网络通信引擎WebSocket服务五

一、Websocket 基本概述

二、代码实现

websocket 服务端

客户端静态页面