心得笔记网站首页 心得笔记

2、开发聊天室

发布时间：2020-08-23 21:30:23编辑：雪饮阅读（）

在之前的chat.php的基础上完善下这个websocket服务，主要是新增为每个客户端返回客户端id（woker的id当前客户端与该websocket服务建立的临时id）如：

<?php
require_once "Workerman-master/Autoloader.php";
//socketname参数可以直接是整个websocket请求地址
$wsServer=new \Workerman\Worker("websocket://127.0.0.1:3000");
//监听四大事件
$wsServer->onConnect=function($conn){
   //设置心跳：例如这里就设置为1秒
    \Workerman\Timer::add(1,function() use($conn){
        $conn->send(json_encode(array('type'=>"hearbeat")));
    });
    $conn->send(json_encode(array('type'=>"sendUid","content"=>$conn->id)));
};
$wsServer->onMessage=function($conn,$data){
    foreach($conn->worker->connections as $v){
        //只给非发送者自己以为的websocket客户端响应数据
        if($v != $conn){
            $v->send($data);
        }
    }
};
$wsServer->onError=function(){};
$wsServer->onClose=function(){};
$wsServer->runAll();

那么前端index.html的ui以及区分每个端的客户端id逻辑也给加上并且用vue特性来渲染页面

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script type="text/javascript" src="vue.js"></script>
     <script>
         var ws=new WebSocket('ws://127.0.0.1:3000');
         ws.onopen=function(ev){};
         ws.onmessage=function(ev){
             console.log("message",ev);
             var data=JSON.parse(ev.data);
             if(data.type=="msg"){
                 vm.$data.messageList.push(data);
             }
             if(data.type=="sendUid"){
                 vm.$data.userData.uid=data.content;
             }
         };
         ws.onerror=function(ev){};
         ws.onclose=function(){}
     </script>
     <style>
         .messageList{
             width:256px;
             height:128px;
             overflow-y: scroll;
             border-radius: 1px;
             border:1px solid #000;
         }
         .messageList li{
             list-style: none;
             clear: both;
         }
         .messageList li .left{
             float: left;
         }
         .messageList li .right{
             float: right;
         }
     </style>
 </head>
 <body>
 <div id="app">
     <center>
         <ul class="messageList">
             <li v-for="item in messageList" :key="item.id">
                 <div class="left" v-if="item.uid==userData.uid">{{userData.uid}}{{ item.content }}</div>
                 <div class="right" v-else>{{ item.content }}</div>
             </li>
         </ul>
         <div class="buttonGroup">
             <input type="text" v-model="message">
             <button v-on:click="sendMessage">发送</button>
         </div>
     </center>
 </div>
 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             message:"",
             messageList:[],
             userData:{uid:0}
         },
         methods:{
             sendMessage:function(){
                 var message={type:"msg",content:this.message,uid:this.userData.uid};
                 ws.send(JSON.stringify(message));
                 this.messageList.push(message);
             }
         }
     })
 </script>
 </body>
 </html>