First, the effect drawing

Two, the front page

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

<head>
    <meta charset="UTF-8">
    <title>Online chat room</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="wrapper">
    <div class="container">
        <div class="left">
            <div class="top">Online personnel</div>
            <ul class="people">
                <li class="person" data-chat="person1">
                    <img src="img/thomas.jpg" alt=""/>
                    <span class="name">Zhang SAN</span>
                    <span class="time">10:09</span>
                </li>
                <li class="person" data-chat="person2">
                    <img src="img/dog.png" alt=""/>
                    <span class="name">Li si</span>
                    <span class="time">10:44</span>
                </li>
                <li class="person" data-chat="person3">
                    <img src="img/louis-ck.jpeg" alt=""/>
                    <span class="name">Cathy</span>
                    <span class="time">He,</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top"><span><span class="name">The chat room</span></span></div>
            <div class="chat" data-chat="person2">
                <template v-for="item in msgList">
                    <div :class="item.data.style">
                        {{ item.data.data }}
                    </div>
                </template>
<! -- <div class="bubble you">-->
<! -- Handsome! -->
<! -- </div>-->
<! -- <div class="bubble me">-->
<! -- Yes, beauty! -->
<! -- </div>-->
            </div>

            <div class="write">
                <input type="text" v-model="msg" @keydown.enter="send()"/>
                <a href="javascript:;" class="write-link send" @click="send()"></a>
            </div>
        </div>
    </div>
</div>


</body>

</html>
<script src="js/index.js"></script>
<script src="js/vue.js"></script>
<script>
    // instantiate the object
    const ws = new WebSocket('ws: / / 101.34.38.111:6060');

    // Listen for connection setup events
    ws.onopen = () = > {
        console.log('The client has established a link')}// Receive message events
    //{} is called the renaming deconstruction of the assignment object
    ws.onmessage = ({data}) = > {
        // Returns a JSON string, which is converted to the object es6 provides a method
        let json = JSON.parse(data)
        vm.msgList.push(json);
        console.log(vm.msgList)
    };


    // Instantiate the Vue
    const vm = new Vue({
        el:'.wrapper'.data: {msg:' '.msgList:[]
        },
        // Methods must add s
        methods: {send(){
                // Get the value in the input box
                let msg = this.msg
                // Send to the webSocket server
                ws.send(msg)
                this.msg = ' '}}})</script>

Copy the code

Third, background code


      
$server = new Swoole\WebSocket\Server("0.0.0.0".6060);

$server->on('open'.function (Swoole\WebSocket\Server $server.$request) {
   $server->push($request->fd, 'welcome to our chat room ');
});

// Receive the message sent by the client
//$frame is a Swoole\WebSocket\ frame object that contains the data frame information sent by the client
$frame->fd represents the unique id of the client
$frame->data represents the message sent by the client
$server->on('message'.function (Swoole\WebSocket\Server $server.$frame) {

    // Get the message sent by the client
    $result['data'] = $frame->data;
    $server->connections $server->connections $server->connections $server->connections
    foreach ($server->connections as $client) {
        // Loop through all client connection data
        //$client represents the connection ID of each user
        // If it is the same person
        if ($client= =$frame->fd) {
            $result['style'] = 'bubble me';
        } else {
            $result['style'] = 'bubble you';
        }

        $data = [
            'msg'= >'Operation successful'.'data'= >$result.'error_code'= >0
        ];
        //push information to the client
        // Broadcast and push to all users
        $server->push($client, json_encode($data.256)); }});$server->on('close'.function ($ser.$fd) {
    echo "client {$fd} closed\n";
});

$server->start();

Copy the code

Fourth, the END

The article continues to update, you can wechat search a search “ke zuo” for the first time to read, reply [instant chat] I prepared the small program source and website source.