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. JAVA多线程学习五：线程范围内共享变量&ThreadLocal

    一.概念 可以将每个线程用到的数据与对应的线程号存放到一个map集合中,使用数据时从这个集合中根据线程号获取对应线程的数据,就可以实现线程范围内共享相同的变量. 二.代码 Runnable中的run( ...

  2. linux centos6.3 升级svn1.6到svn1.8

    linux centos6.3 升级svn1.6 1. 删除svn1.6 #yum remover subverson12.设置svn1.8安装源 vim /etc/yum.repos.d/wandi ...

  3. NSString为何要用copy修饰，而不是strong？

    NSString本身是无所谓的,但是如果一个 NSString 指针指向了一个 NSMutableString的内存空间的话,如果使用 strong 修饰的话,如果你在别处修改这个值的话,那么原来的值 ...

  4. 循环retian

    1.循环retian基本概念 循环retain的场景 比如A对象retain了B对象,B对象retain了A对象 循环retain的弊端 这样会导致A对象和B对象永远无法释放 循环retain的解决方 ...

  5. MSTP多生成树协议

    MSTP多生成树协议 目录 MSTP多生成树协议 1.MSTP(Multiple Spanning Tree Protocol)概述 2.STP.RSTP.PVST的应用缺陷 3.MSTP的主要特点 ...

  6. 记录netcore一次内存暴涨的坑

    项目用到了Coldairarrow/EFCore.Sharding: Database Sharding For EFCore (github.com)这个组件,最初是因为分表做的还不错所以用了它. ...

  7. 03并发编程（多道技术+进程理论+进程join方法）

    目录 03 并发编程 03 并发编程

  8. Solution -「ZJOI 2016」「洛谷 P3352」线段树

    \(\mathcal{Descrtiption}\)   给定 \(\{a_n\}\),现进行 \(m\) 次操作,每次操作随机一个区间 \([l,r]\),令其中元素全部变为区间最大值.对于每个 \ ...

  9. Solution -「HDU #6566」The Hanged Man

    \(\mathcal{Description}\)   Link.   给定一棵含 \(n\) 个点的树,每个结点有两个权值 \(a\) 和 \(b\).对于 \(k\in[1,m]\),分别求 \[ ...

  10. Spring Boot自动配置SpringMVC(一)

    实际上在关于Spring Boot自动配置原理实战的文章Spring Boot自动配置实战 - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)中,可以看到我们使用到了@ReqeusMappi ...