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. 汉字编码（【Unicode】 【UTF-8】 【Unicode与UTF-8之间的转换】 【汉字 Unicode 编码范围】【中文标点Unicode码】【GBK编码】【批量获取汉字UNICODE码】）

    Unicode与UTF-8互转(C语言实现):http://blog.csdn.net/tge7618291/article/details/7599902 汉字 Unicode 编码范围:http: ...

  2. WebSocket协议详解及应用

    WebSocket协议详解及应用(七)-WebSocket协议关闭帧 本篇介绍WebSocket协议的关闭帧,包括客户端及服务器如何发送并处理关闭帧.关闭帧错误码及错误处理方法.本篇内容主要翻译自RF ...

  3. JVM学习七-（复习）垃圾收集策略与算法

    垃圾收集策略与算法 程序计数器.虚拟机栈.本地方法栈随线程而生,也随线程而灭:栈帧随着方法的开始而入栈,随着方法的结束而出栈.这几个区域的内存分配和回收都具有确定性,在这几个区域内不需要过多考虑回收的 ...

  4. Python安装pip时， 报错：zipimport.ZipImportError: can't decompress data; zlib not available

    解决办法: 1.安装依赖zlib.zlib-devel 2.重新编译安装Python 具体步骤: 1 到python安装目录下,运行./configure 2 编辑Modules/Setup文件 vi ...

  5. ubuntu 终端乱码

    转载请注明来源:https://www.cnblogs.com/hookjc/ 解决方法: 一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字符编码为zh_CN.UTF-8, 这个可以在 ...

  6. redis集群升级，数据迁移及校验

    本次由于安全漏洞原因,需要降redis3升级为redis6,涉及到数据迁移及校验等,用阿里redis-shake迁移工具迁移,并用阿里RedisFullCheck工具进行数据比对 一.新redis安装 ...

  7. Java基础复习(六)

    1. 接口的实现类中的实现接口中的抽象方法的方法必须为public,为什么? 接口中所有的方法与变量都默认是 public 的,在接口中可以不写出来.但在实现类中,如果不明写的话,就变成了 frien ...

  8. 「 题解 」P2487 [SDOI2011]拦截导弹

    简单题意 给定 \(n\) 个数对 \((h_i, v_i)\). 求: 最长不上升子序列的长度. 对于每个 \(i\),分别求出包含数对 \((h_i, v_i)\) 的最长上升子序列的个数和最长不 ...

  9. 在Linux中设置php变量的方法

    默认情况下已经安装好了PHP环境,并且知道安装好后的PHP文件路径,然后可以通过以下的方式设置PHP变量,快速执行PHP命令运行PHP文件. 环境:centos 第一步:vi ~/.bash_prof ...

  10. Involuting Bunny! (2021.9)

      文化课就很掉头发,文科都能学好我还怕竞赛?(   大概从"刷的题的题解"推广为"所有做的题的题解"吧,兔子比较懒,这样写题解轻松一些.   Gym10305 ...