1：项目目录新建php文件和html文件，这里我建了一个swoole文件夹，chat.php 和chat.html

2:将项目同步上线

0.0.0.0 代表的是所有人都可以连接。

chat.php代码：

<?php

//创建WebSocket Server对象，监听0.0.0.0:9507端口

$ws = new Swoole\WebSocket\Server('0.0.0.0', 9507);

//监听WebSocket连接打开事件

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

    $result = [

        'error_code' => 0,

        'data' => [

            'data' => '欢迎来到多人聊天室',

            'class' => ''

        ],

        'msg' => '发送成功'

    ];

    $ws->push($request->fd, json_encode($result,256));

});

//监听WebSocket消息事件

$ws->on('Message', function ($ws, $frame) {

    //$frame->fd 当前客户端的唯一标识

    //$frame->data 客户端发送 的数据

    //$ws->connections 获取所有的客户端连接对象

    foreach ($ws->connections as $fd) {

        if ($frame->fd == $fd) {

            $class = 'bubble me';

        } else {

            $class = 'bubble you';

        }

        $result = [

            'error_code' => 0,

            'data' => [

                'data' => $frame->data,

                'class' => $class

            ],

            'msg' => '发送成功'

        ];

        //发送群聊中的所有人

        $ws->push($fd, json_encode($result,256));

    }

});

//监听WebSocket连接关闭事件

$ws->on('Close', function ($ws, $fd) {

    echo "client-{$fd} is closed\n";

});

$ws->start();

3：chat.html

<!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="/swools/chat/css/reset.min.css">

    <link rel="stylesheet" href="/swools/chat/css/style.css">

</head>

<body>

<div class="wrapper">

    <div class="container">

        <div class="left">

        <div class="top"> 在线人员 </div>

        <ul class="people">

            <li class="person" data-chat="person1">

                <img src="/swools/chat/img/thomas.jpg" alt="" />

                <span class="name">张三</span>

                <span class="time">10:09</span>

            </li>

            <li class="person" data-chat="person2">

                <img src="/swools/chat/img/dog.png" alt="" />

                <span class="name">李四</span>

                <span class="time">10:44</span>

            </li>

            <li class="person" data-chat="person3">

                <img src="/swools/chat/img/louis-ck.jpeg" alt="" />

                <span class="name">王五</span>

                <span class="time">10:50</span>

            </li>

        </ul>

    </div>

        <div class="right">

            <div class="top"><span><span class="name">多人聊天室</span></span></div>

            <div class="chat" data-chat="person2">

                <!--template 相当于微信小程序block标签，没有实际样式输出，用来循环-->

                <template v-for="item in msgList">

                    <div :class="item.data.class">

                        {{ item.data.data }}

                    </div>

                </template>

            </div>

            <div class="write">

                <input type="text" v-model="msg" @keyup.enter="send()"/>

                <a href="javascript:;" class="write-link send" @click="send()"></a>

            </div>

        </div>

    </div>

    <

</div>

</body>

</html>

<script src="/swools/chat/js/index.js"></script>

<!--<script  src="/swools/chat/js/vue.js"></script>-->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var wsServer = 'ws://139.224.63.57:9507';

    var websocket = new WebSocket(wsServer);

    websocket.onmessage = function ({data}) {

        let json = JSON.parse(data)

        //接收到服务端推送过来的消息

        //进行追加到msgList数组里

        let msgArr = app.msgList

        msgArr.push(json)

    };

    // window.onload = function () {

    //

    // }

    var app = new Vue({

        el: '.wrapper',

        data: {

            msg: '',

            msgList: []

        },

        methods: {

            send() {

                //获取输入框里面的值

                let msg = this.msg

                //获取发给谁 uid =1

                //谁发的   uid=2

                //发送服务端

                websocket.send(msg)

                this.msg = ''

            }

        }

    })

</script>

4：宝塔终端运行chat.php 文件，切记切换到文件目录下运行.php文件

php chat.php

5：将宝塔9507端口放行

6：阿里云服务器9507端口放行

效果图：

git参考：

https://gitee.com/kezuo/swoole_chat

上线参考：

https://www.cnblogs.com/xiaoyantongxue/p/15629690.html

Vue运用swoole 实现多人聊天的更多相关文章

  1. 基于swoole实现多人聊天室

    核心的swoole代码 基本的cs(client-sercer)结构不变,这里利用的是redis的哈希和set来储存和分组;从而达到了分组,统计,定时推送等功能;最后利用onclose事件来剔除断开的 ...

  2. Swoole实现h5版聊天室笔记

    声明:该聊天室目前只有一对多,一对一的聊天功能,另外,因为没有使用到mysql,所以还存在比较多的缺陷地方,但知道原理就差不多了,这里主要分享下swoole简易的聊天室制作思路. 开发环境:cento ...

  3. SignalR 实现Web多人聊天室

      ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消 ...

  4. Apache MiNa 实现多人聊天室

    Apache MiNa 实现多人聊天室 开发环境: System:Windows JavaSDK:1.6 IDE:eclipse.MyEclipse 6.6 开发依赖库: Jdk1.4+.mina-c ...

  5. android asmack 注册 登陆 聊天 多人聊天室 文件传输

    XMPP协议简介 XMPP协议(Extensible Messaging and PresenceProtocol,可扩展消息处理现场协议)是一种基于XML的协议,目的是为了解决及时通信标准而提出来的 ...

  6. 与众不同 windows phone (31) - Communication（通信）之基于 Socket UDP 开发一个多人聊天室

    原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  7. 与众不同 windows phone (30) - Communication（通信）之基于 Socket TCP 开发一个多人聊天室

    原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  8. java 通过TCP\UDP 协议实现多人聊天，点对点，文件传送-----分服务器端和客户端

    java 通过TCP\UDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端 启动界面如下图: 首先启动服务器: 客户端登陆,登陆成功后为: 默认发送是全部用户,是多人发送. 当在边列 ...

  9. Spring整合DWR comet 实现无刷新 多人聊天室

    用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无刷新,一般会使用到Ajax.Ajax 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...

随机推荐

  1. AGC005 部分简要题解

    E 首先注意到这个问题事实上非常复杂(两棵树上博弈),基础的转化无效,于是考虑简化情形. 手玩很多样例可以发现,似乎很容易出现无限循环的情况,进一步地,有观察: 若第一棵树上存在相邻点 \(u, v\ ...

  2. Lua 语言: 语法

    转载请注明来源:https://www.cnblogs.com/hookjc/ -- 两个横线开始单行的注释 --[[  加上两个[和]表示     多行的注释.--]] -------------- ...

  3. nvidia-smi

    内容转自:https://blog.csdn.net/handsome_bear/article/details/80903477 nvidia-smi 显示 说明 Fan 风扇转速(0%--100% ...

  4. python——三方电子邮件库pyzmail

    pyzmail比默认smtplib和mime模块简单很多. 模块首页 http://pyzmail.readthedocs.io/en/latest/ python3.2以上,pip install ...

  5. 3.HTTP协议详解

    ### Web核心+HTTP协议 准备工作:XAMPP+PhpWindd+Aglieone HTTP协议简介 HTTP请求 最常用请求 GET请求获取URL所标识的资源 POST请求在URL所标识的资 ...

  6. KiSystemCall64 win10 21h2函数流程分析 3环到0环

    0x00基本信息 系统:windows 10 21h2 工具:ida 7.7 , windbg 10 3环写一个win32k 函数 看访问流程 0x01分析 例如:3环函数 FlattenPath(x ...

  7. Solution -「CF 1622F」Quadratic Set

    \(\mathscr{Description}\)   Link.   求 \(S\subseteq\{1,2,\dots,n\}\),使得 \(\prod_{i\in S}i\) 是完全平方数,并最 ...

  8. Solution -「ROI 2019」「LOJ #3192」课桌

    \(\mathcal{Description}\)   Link.   原题意足够简洁啦.( \(\mathcal{Solution}\)   乍一看比较棘手,但可以从座位的安排方式入手,有结论:   ...

  9. 『无为则无心』Python面向对象 — 46、类和对象

    目录 1.理解类和对象 2.类 3.对象 4.Python中的对象 5.类和对象的定义 (1)定义类 (2)创建对象 (3)练习 6.拓展:isinstance() 函数 1.理解类和对象 (1)类和 ...

  10. 清理 Docker 占用的磁盘空间

    Docker 很占用空间,每当我们运行容器.拉取镜像.部署应用.构建自己的镜像时,我们的磁盘空间会被大量占用. 如果你也被这个问题所困扰,咱们就一起看一下 Docker 是如何使用磁盘空间的,以及如何 ...