js + swoole 實現websocket

時間 2019-11-06

標籤 swoole 實現 websocket 欄目 JavaScript 简体版

原文原文鏈接

js部分

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
    </style>
</head>

<body>
<div style="margin-left:400px">
    <div style="border:1px solid;width: 300px;height: 200px;">
        <div id="msgArea" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微軟雅黑;font-size: 20px;overflow-y: scroll"></div>
    </div>
    <div style="border:1px solid;width: 300px;height: 100px;">
        <div style="width:100%;height: 100%;">
            <textarea id="userMsg" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微軟雅黑;font-size: 20px;"></textarea>
        </div>
    </div>
    <div style="border:1px solid;width: 300px;height: 25px;">
        <button style="float: right;" onclick="sendMsg()">發送</button>
    </div>
</div>
</body>

</html>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
    var ws;
    $(function(){
        link();
    })

    function link () {
        ws = new WebSocket("ws://192.168.75.130:9502");//鏈接服務器
        ws.onopen = function(event){
            console.log(event);
        };
        ws.onmessage = function (event) {
            console.log(event);
            var msg = "<p>"+event.data+"</p>";
            $("#msgArea").append(msg);
        }
        ws.onclose = function(event){alert("已經與服務器斷開鏈接\r\n當前鏈接狀態："+this.readyState);};

        ws.onerror = function(event){console.log("WebSocket異常！");};
    }

    function sendMsg(){
        var msg = $("#userMsg").val();
        ws.send(msg);
    }
</script>

php部分（記得先配置好服務器，安裝swoole拓展）

<?php

$server = new swoole_websocket_server("0.0.0.0", 9502);

$server->on('open', function (swoole_websocket_server $server, $request) {
    echo "server: handshake success with fd{$request->fd}\n";
});

$server->on('message', function (swoole_websocket_server $server, $frame) {
    foreach($server->connections as $key => $fd) {
        $user_message = $frame->data;
        $server->push($fd, $user_message);
    }

});

$server->on('close', function ($ser, $fd) {
    echo "client {$fd} closed\n";
});

$server->start();

相關標籤/搜索

swoole+websocket

js實現

websocket+swoole+codeingiter

swoole+websocket+redis

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。