Swoole学习之网络通讯引擎WebSocket服务(五)

时间 2019-11-16

标签 swoole 学习网络通讯引擎 websocket 服务栏目系统网络繁體版

原文原文链接

1、Websocket基本概述

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

为何须要WebSocket?
缺陷：HTTP的通讯只能由客户端发起html

WebSocket的特色：web

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

2、代码实现

websocket服务端

ws_server.phpdocker

<?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 端口，这样能够在宿主机经过以前作的端口映射，就能够在宿主机浏览器访问该服务。浏览器

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

➜  ~ 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.htmlwebsocket

<!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.onopen = function(evt){
        console.log("connected-swoole-success")
         websocket.send("Hello-Lily"); // 发送信息给服务端
    }

    // 实例化 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

3、WebSocket服务优化

咱们能够看到，上边的 ws_server.php 代码是面向过程代码，不够优雅，这里咱们能够把这些方法封装起来，用面向对象的思路来优化。网络

ws.php

<?php

/**
 * WS 优化基础类库
 */

class Ws
{
    public $ws = null;

    CONST HOST = "0.0.0.0";
    CONST PORT = 80;

    public function __construct()
    {
        $this->ws = new swoole_websocket_server(static::HOST, static::PORT);

        $this->ws->on("open", [$this, "onOpen"]);
        $this->ws->on("message", [$this, "onMessage"]);
        $this->ws->on("close", [$this, "onClose"]);

        $this->ws->start();
    }

    /**
     * 监听ws链接事件
     * @param $ws
     * @param $request
     */
    public function onOpen($ws, $request)
    {
        var_dump($request->fd);
    }

    /**
     * 监听ws链接消息
     * @param $ws
     * @param $frame
     */
    public function onMessage($ws, $frame)
    {
        echo "ser-push-message:{$frame->data}\n";

        $ws->push($frame->fd, "server-push:".date("Y-m-d H:i:s"));

    }

    /**
     * 监听WebSocket链接关闭事件
     *
     * @param $ws
     * @param $fd
     */
    public function onClose($ws, $fd)
    {
        echo "clientid:{$fd} closed \n";
    }
}

$ws_obj = new Ws();

经过面向对象封装，上边的代码优雅了不少哈~