php+swoole实现一个简单的聊天室

最新推荐文章于 2024-09-16 18:27:16 发布

wyqgg123

最新推荐文章于 2024-09-16 18:27:16 发布

阅读量688

点赞数

分类专栏： swoole php 文章标签： php javascript vue.js swoole

本文链接：https://blog.youkuaiyun.com/wyqgg123/article/details/120439256

版权

php 同时被 2 个专栏收录

22 篇文章

订阅专栏

swoole

4 篇文章

订阅专栏

服务端代码

<?php
$websocket = new \Swoole\WebSocket\Server('0.0.0.0', '6070');

$websocket->set([
    'worker_num' => 1
]);

$websocket->on('Open', function ($ws, $request) {
});

$websocket->on('Message', function ($ws, $frame) {
    //将传递过来的json编译为数组
    $data = json_decode($frame->data,true);
    //遍历全部的连接
    foreach ($ws->connections as $client) {
        //1为用户登录时进入聊天室的时候
        if ($data['type'] == 1){
            //设置一个进入的时间
            $data['time'] = date('Y-m-d H:i:s',time());
        }else{
            //其他的就为发送消息
            if ($client == $frame->fd) {
                //消息的样式 ,发给自己的样式
                $data['style'] = 'bubble me';
            } else {
                //消息的样式 ,发给别人的样式
                $data['style'] = 'bubble you';
            }
        }
        //返回数据给所有客户端
        @$ws->push($client, json_encode($data));
    }
});

$websocket->start();

客户端页面代码

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

<head>
    <meta charset="UTF-8">
    <title>在线聊天室</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"> 在线人员</div>
            <ul class="people">
                <!--start遍历在线用户 -->
                <template v-for="item in userlist">
                    <li class="person" data-chat="person1">
                        <img src="img/thomas.jpg" alt=""/>
                       	<!--在线人的姓名、时间-->
                        <span class="name">{{item.name}}</span>
                        <span class="time">{{item.time}}</span>
                    </li>
                </template>
                <!--end遍历在线用户-->
            </ul>
        </div>
        <div class="right">
            <div class="top"><span><span class="name">聊天室</span></span></div>
            <div class="chat" data-chat="person2">
                <!--start遍历发送的信息 -->
                <template v-for="item in msglist">
                    <!--样式-->
                    <div :class="item.style">
                        <!--消息-->
                        {{item.msg}}
                    </div>
                </template>
                <!--end遍历发送的信息 -->
            </div>

            <div class="write">
				<!--数据双向绑定，方便获取数据-->
                <input type="text" v-model="msg" placeholder="请输入要发送的消息"/>
                <!--绑定事件，点击触发发送消息事件-->
                <a @click="send" class="write-link send"></a>
            </div>
        </div>
    </div>
</div>

<script src="js/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //建立WebSocket连接
    var ws = new WebSocket('ws://8.131.95.189:6070');
    	//当接收到服务端返回的数据时触发事件
        ws.onmessage = (evt)=>{
            //数据从json转化为数组
            data = JSON.parse(evt.data);
            if (data['type'] ==1){
                //进入聊天室时将用户信息存入userlist中
                vm.userlist.push(data);
            } else{
                //发送消息时将消息信息存在msglist中
                vm.msglist.push(data);
            }
        };
    	//客户端与服务器建立连接并完成握手后触发
        ws.onopen = () =>{
            //定义一个随机姓名
            var name = parseInt(100*Math.random());
            //将用户信息存为数组
            var userinfo = {'name':name,'type':1};
            //数组json化
            userinfo = JSON.stringify(userinfo);
            //向服务端发送数据
            ws.send(userinfo);
        };
    //实例化vue对象
    var vm = new Vue({
        el: '.wrapper',
        data: {
            msg: '',
            msglist: [],
            user:'',
            userlist:[],
        },
        methods: {
            //发送消息事件
            send(){
                //定义消息数组
                var msg = {'msg':this.msg,'type':2};
                msg = JSON.stringify(msg);
                //发送消息到服务端
                ws.send(msg);
                //发完消息后值赋值为空
                this.msg="";
            }
        }
    });
</script>
</body>

</html>