Vue运用swoole 实现多人聊天
2024-10-19 16:40:23
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
最新文章
- Oracle组合索引与回表
- 《java异常的一些总结》
- JaxWsProxyFactoryBean 与 JaxWsDynamicClientFactory
- Hibernate映射一对多双向关联关系及部门关联属性
- OC前15天重点回顾
- eclipse中 properties文件编码问题
- HTML页面中启用360浏览器极速模式
- iOS开发中文件的上传和下载功能的基本实现-备用
- 在Ubuntu中使用JDB调试代码
- [转]有return的情况下try catch finally的执行顺序
- D2欧拉路,拓扑排序,和差分约束
- mysql服务里面没有启动项
- centos7.4上安装python3环境的坑
- 【zigbee 】2.4G信号发放器 AT2401C PA功放
- Python入门之面向对象编程(一)面向对象概念及优点
- php发送post请求的三种方法
- Power OJ 2605 SPFA+dp思想
- Thinkphp3.2 PHPexcel 导出
- vue报错 vue-cli 引入 stylus 失败
- 图文详解 IntelliJ IDEA 15 创建 Maven 构建的 Java Web 项目(使用 Jetty 容器)