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. 浅谈FFT（快速傅里叶变换）

    前言 啊摸鱼真爽哈哈哈哈哈哈 这个假期努力多更几篇( 理解本算法需对一些< 常 用 >数学概念比较清楚,如复数.虚数.三角函数等(不会的自己查去(其实就是懒得写了(￢︿̫̿￢☆) 整理了一 ...

  2. JOISC 2017

    Day1 「JOISC 2017 Day 1」开荒者 首先观察部分分发现分档很多,于是考虑一步步思考上来. 首先有一点关键观察(一): 风吹的顺序是无所谓的,令分别往东.西.南.北吹了 \(r, l, ...

  3. Linux中Swap与Memory内存简单介绍 （转）

    https://blog.csdn.net/zwan0518/article/details/12059213 一.背景介绍 对于Linux来说,其在服务器市场的使用已经占据了绝对的霸主地位,不可动摇 ...

  4. 匿名内部类不能访问外部类方法中的局部变量，除非变量被声明为final类型

    1. 这里所说的"匿名内部类"主要是指在其外部类的成员方法内定义,同时完成实例化的类,若其访问该成员方法中的局部变量,局部变量必须要被final修饰.2. 原因是编译程序实现上的困 ...

  5. 关于spring data redis repository @RedisHash注解的对象上有DateTime属性字段的问题

    当你save保存的时候你会发现出现StackOverflow Exception,很明显出现了无限循环,可是仅仅是一个save操作,哪里来的无限循环呢? 最终发现就是DateTime导致的,因为将对象 ...

  6. pytest(8)-参数化

    前言 什么是参数化,通俗点理解就是,定义一个测试类或测试函数,可以传入不同测试用例对应的参数,从而执行多个测试用例. 例如对登录接口进行测试,假设有3条用例:正确账号正确密码登录.正确账号错误密码登录 ...

  7. Solution Set - Border Theory

      我发现写 Solution Set 就不用写每道题的题意了,岂不美哉?   首先是一些奇妙结论.   定理 1(弱周期定理) 对于字符串 \(S\),若 \(S[:p]\) 和 \(S[:q]\) ...

  8. traceroute实用命令总结

    在工作中,我们经常会使用到traceroute进行追踪路由,从而判断网络的故障点,或者网络策略限制等原因.对于网络排查traceroute还是有很大用处的. 一.traceroute常用命令参数 用法 ...

  9. c++ 动态内存2

    动态内存 vector<int> * gen_vector(const size_t &size) { return new vector<int>(size, 0); ...

  10. splunk设置索引周期和索引大小

    步骤一: 编辑/opt/splunk/etc/apps/search/local/indexs.conf ,在每个索引下面 加入最后两行内容 [messages] coldPath = $SPLUNK ...