php+swoole实现群聊

简介

http://www.ruanyifeng.com/blog/2017/05/websocket.html

服务器端代码



$server = new swoole_websocket_server("127.0.0.1", 9501);
$server->on('open', function (swoole_websocket_server $server, $request) {  
  echo "连接的id是:{$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();  

注意需要通过php-cli(俗说命令行方式运行)

这里写图片描述

客户端代码

  
<html lang="en">  

<head>  
    <meta charset="utf-8">
    <style>  
        *{  
            margin:0px;  
            padding:0px;  
        }  
    style>  
head>  

<body>  
    <div style="margin-left:400px">
        <h3>群聊天室h3>
        <div style="border:1px solid;width: 600px;height: 300px;">
            <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: 600px;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: 600px;height: 25px;">  
            <button style="float: right;" onclick="sendMsg()">发送button>  
        div>  
    div>  
body>  

html>  
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">script>  
<script>  
    var ws;  
    $(function(){  
        link();  
    })
    function link () {  
        ws = new WebSocket("ws://127.0.0.1:9501");//连接服务器
        ws.onopen = function(event){  
            console.log(event);  
            alert('连接了');  
        };  
        ws.onmessage = function (event) {  
            var date = new Date();
            var msg = "

"+date.toLocaleString()+"

"
+"

"+event.data+"

"
; $("#msgArea").append(msg); } ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);}; ws.onerror = function(event){alert("WebSocket异常!");}; } function sendMsg(){ var msg = $("#userMsg").val(); ws.send(msg); }
script>

运行效果

php+swoole实现群聊_第1张图片

参考地址

https://wiki.swoole.com/wiki/page/1.html

你可能感兴趣的:(php,协议,html5,Swoole,apache)