Vue运用swoole 实现多人聊天
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 实现多人聊天的更多相关文章
- 基于swoole实现多人聊天室
核心的swoole代码 基本的cs(client-sercer)结构不变,这里利用的是redis的哈希和set来储存和分组;从而达到了分组,统计,定时推送等功能;最后利用onclose事件来剔除断开的 ...
- Swoole实现h5版聊天室笔记
声明:该聊天室目前只有一对多,一对一的聊天功能,另外,因为没有使用到mysql,所以还存在比较多的缺陷地方,但知道原理就差不多了,这里主要分享下swoole简易的聊天室制作思路. 开发环境:cento ...
- SignalR 实现Web多人聊天室
ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消 ...
- Apache MiNa 实现多人聊天室
Apache MiNa 实现多人聊天室 开发环境: System:Windows JavaSDK:1.6 IDE:eclipse.MyEclipse 6.6 开发依赖库: Jdk1.4+.mina-c ...
- android asmack 注册 登陆 聊天 多人聊天室 文件传输
XMPP协议简介 XMPP协议(Extensible Messaging and PresenceProtocol,可扩展消息处理现场协议)是一种基于XML的协议,目的是为了解决及时通信标准而提出来的 ...
- 与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室
原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- 与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室
原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...
- java 通过TCP\UDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端
java 通过TCP\UDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端 启动界面如下图: 首先启动服务器: 客户端登陆,登陆成功后为: 默认发送是全部用户,是多人发送. 当在边列 ...
- Spring整合DWR comet 实现无刷新 多人聊天室
用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无刷新,一般会使用到Ajax.Ajax 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...
随机推荐
- Linux Shell中的数组及遍历 转
转自:http://www.linuxidc.com/Linux/2011-09/42929.htm 在Linux下使用shell的时候,为方便起见,偶尔会用到一下数组.数组的申明方式是: array ...
- 给 zsh 自定义命令添加参数自动补全
有时我会自定义一些 zsh 命令,以便提升某些高频操作的效率.本文记录我给一个自定义命令添加参数自动补全的方法. 场景 我自定义了一个 zsh 命令 gmt,执行 gmt <b2>,可以将 ...
- gitlab登录时出现402的错误
当登录gitlab时出现402的错误提示,可进行以下操作 重新设置一下系统时间 在new project 时若还出现同样的402问题,则清除一下浏览器的cookie即可
- MySQL 快速入门(一)
目录 MySQL快速入门 简介 存储数据的演变过程 数据库分类 概念介绍 MySQL安装 MySQL命令初始 环境变量配置 MySQL环境变量配置 修改配置文件 设置新密码 忘记密码的情况 基本sql ...
- 手把手教你使用HarmonyOS本地模拟器
2021年的华为开发者大会(HDC2021)上,我们随DevEco Studio 3.0 Beta1版本发布首次推出了本地模拟器(也称为Local Emulator),支持模拟手机品类. 我们通过下面 ...
- ZCC2410同步升压变换芯片
ZCC2410???? 22V/25A同步升压变换器 ZCC2410是一种高效率.高功率密度.宽输入范围.电流模式升压变换器.该转换器集成了一个10mΩ.24V电源开关和一个同步门高转换器效率的驱动 ...
- Spring是什么? 核心总结
Spring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的. Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情. 然而,Spring ...
- VS2019下配置OpenGL全过程
一:下载VS2019 官网下载社区版 二:下载GLEW.GLFW 百度网盘地址: 链接:https://pan.baidu.com/s/1Uvz9svdnVRvDXNHjVgApig 提取码:rsgp ...
- 使用Flask开发简单接口
作为测试人员,在工作或者学习的过程中,有时会没有可以调用的现成的接口,导致我们的代码没法调试跑通的情况. 这时,我们使用python中的web框架Flask就可以很方便的编写简单的接口,用于调用或调试 ...
- 突破限制,CSS font-variation 可变字体的魅力
今天,在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave,借助了 JS 动画库 GSAP 实现,一起来看看: 我寻思着能否使用 CSS 复刻 ...