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. NumPy 初学者指南中文第三版·翻译完成

    原文:NumPy: Beginner's Guide - Third Edition 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅 ...

  2. 013 Linux 搞懂「文件所属者更改及权限的赋予」从未如此简单(chmod、chgrp、chown)

    目录 01 一图详解「ls -l」 02 两种符号区分表示文件和目录 03 三种访问权限及表示 04 四种符号表示文件所属者用户 05 三个变更文件所属者及修改所属者权限的命令 06 工作实践命令举例 ...

  3. Feign的异步调用或者MQ调用与Security的问题处理；

    两大踩坑点: 一:部分框架自带有查询当前登录人的信息工具,无需各种本地线程栈ThreadLocals取Request啥的折磨自己: 二:Security自带有uri匹配的工具,没事多翻翻源码,原创方法 ...

  4. springBoot工程解决跨域问题

    更新:通过一个 @CrossOrigin  注解就可以完美解决跨域问题. 创建一个配置类 package com.miaoshaProject.configuration; import org.sp ...

  5. Spark——统计文本中单词出现的次数

    示例一:统计所有单词出现的次数 1.在本地创建文件并上传到hdfs中 #vin data.txt //将文件上传到hadoop的根目录下 #hdfs dfs -put data.txt / 2.在sp ...

  6. Pandas之groupby分组

    释义 groupby用来分组,调用groupby 之后返回pandas.core.groupby.generic.DataFrameGroupBy,其实就是由一个个格式为(key, 分组后的dataf ...

  7. Solution -「多校联训」小卖部

    \(\mathcal{Description}\)   Link.   有 \(n\) 种物品,第 \(i\) 中有 \(a_i\) 个,单价为 \(b_i\).共 \(q\) 次询问,每次查询用不超 ...

  8. Java在算法题中的输入问题

    Java在算法题中的输入问题 在写算法题的时候,经常因为数据的输入问题而导致卡壳,其中最常见的就是数据输入无法结束. 1.给定范围,确定输入几个数据 直接使用普通的Scanner输入数据范围,然后使用 ...

  9. 5.Flink实时项目之业务数据准备

    1. 流程介绍 在上一篇文章中,我们已经把客户端的页面日志,启动日志,曝光日志分别发送到kafka对应的主题中.在本文中,我们将把业务数据也发送到对应的kafka主题中. 通过maxwell采集业务数 ...

  10. 基于containerd二进制部署k8s-v1.23.3

    文章目录 前言 k8s 组件 环境准备 创建目录 关闭防火墙 关闭selinux 关闭swap 开启内核模块 分发到所有节点 启用systemd自动加载模块服务 配置系统参数 分发到所有节点 加载系统 ...