swoole中websoket创建在线聊天室（php）
swoole中websoket创建在线聊天室（php）
swoole现仅支持Linix，macos
创建websocket服务器
首先现在服务器创建一个websocket服务器
<?php
//创建websocket服务器
$server = new Swoole\WebSocket\Server("0.0.0.0", 6060);
// 当WebSocket客户端与服务器建立连接并完成握手后会回调此函数
$server->on('open', function (Swoole\WebSocket\Server $server, Swoole\Http\Request $request) {
});
// 服务器主动向客户端发送数据
$server->on('message', function (Swoole\WebSocket\Server $server, swoole_websocket_frame $frame) {
$data = $frame->data;
$ret['data'] = $data;
//广播群发
foreach ($server->connections as $client) {
//判断客户端是否自己
if ($frame->fd == $client) {
$ret['style'] = 'bubble me';
} else {
$ret['style'] = 'bubble you';
}
@$server->push($client, json_encode($ret, 256));
}
});
// 客户端关闭连接时触发此回调函数
$server->on('close', function ($ser, $fd) {
});
// 启动服务
$server->start();
html页面
创建一个简单可用的swoole聊天室
<!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="css/reset.min.css">
<link rel="stylesheet" href="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="img/thomas.jpg" alt=""/>
<span class="name">张三</span>
<span class="time">10:09</span>
</li>
<li class="person" data-chat="person2">
<img src="img/dog.png" alt=""/>
<span class="name">李四</span>
<span class="time">10:44</span>
</li>
<li class="person" data-chat="person3">
<img src="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 v-for="item in msglist">
<div :class="item.style">
{{ item.data }}
</div>
</template>
</div>
<div class="write">
<input type="text" v-model="msg" placeholder="输入内容" @keydown.enter="send"/>
<!-- vue 修饰符 once prevent stop enter shift alt -->
<a @click.prevent="send" class="write-link send"></a>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
<script src="js/vue.js"></script>
<script>
// 客户端连接websocket服务器端
const ws = new WebSocket('ws://175.24.114.149:6060');
// 事件监听
// 建议时事件
ws.onopen = () => {
console.log('连接建立')
};
// 接受消息事件
ws.onmessage = ({data}) => {
// 返回的是一个json字符串，json字符串转为对象 es6提供一个方法
let json = JSON.parse(data);
// 使用vue提供变异方法
vm.msglist.push(json);
};
// 实例化 主组件中，data是用的对象非函数 子组件data用的是函数返回一个对象
const vm = new Vue({
el: '.wrapper',
data: {
msg: '',
// 消息列表
msglist: []
},
methods: {
// 发送消息事件
send() {
ws.send(this.msg);
this.msg = '';
}
}
});
</script>
</body>
</html>
swoole中websoket创建在线聊天室（php）的更多相关文章
- 在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- 基于Server-Sent Event的简单在线聊天室
Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- SignalR实现在线聊天室功能
一.在线聊天室 1.新建解决方案 SignalROnlineChatDemo 2.新建MVC项目 SignalROnlineChatDemo.Web (无身份验证) 3.安装SignalR PM> ...
- Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室 获取保存用户信息）
简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室
在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
- 百度前端面试题－类似slack的在线聊天室
别人国庆出去玩,我在家写代码的感觉也是很不错哒. 首先介绍一下技术架构吧! 使用了js框架:FFF,zepto,jquery,md5.min.js 前端框架:Bootstrap 后端:野狗,部分PHP ...
随机推荐
- Jenkins环境搭建（8）-邮件未能正常发送
昨天,在使用jenkins构建项目时,出现了个问题,问题是:jenkins控制台日志显示邮件发送成功,但实际没有成功. 此前,jenkins的配置,项目构建后,是能正常发送邮件的,可这次突然就不行了, ...
- AcWing 369. 北大ACM队的远足
\(\text{Update on 2020.3.25}\) 我之前的做法也有问题,讨论还是不够严谨,导致又有几组(见 打卡评论区)\(\text{Hack}\) 此题数据极水,这里有几种错误写法: ...
- 膜 zhouakngyang 宝典
持续更新! 注意:本文无 F12. about 周老师:怎么这么强! ZAKY 打 CF 大图:zaky cgr rk1 大图:zaky 传奇 \(1\) ZAKY 打 ATC ZAKY 切题
- 使用plesk遇到的问题
按照plesk使用指南中,"快速建站"的部分,配置一番后,还是访问不了网站. 后来解决了,原因如下: 主域名没有解析,只解析了,带www的子域名 80端口没开
- DVWA各级文件包含漏洞
File Inclusion文件包含漏洞 漏洞分析 程序开发人员通常会把可重复使用的函数写入到单个文件中,在使用某些函数时,直接调用此文件,而无需再次编写,这种调用文件的过程被称为包含. 有时候由于网 ...
- sql注入之文件写入into outfile
sql注入中写入webshell的几种方式 sql注入中写入webshell的几种方式 secure_file_priv="c:/-"被注释掉或者是web路径 php.ini中的g ...
- Restful规则及JPA导致内存溢出
HTTP动词 对于资源的具体操作类型,由HTTP动词表示. 常用的HTTP动词有下面五个(括号里是对应的SQL命令). GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE ...
- IIS应用程序池配置详解及优化
参数说明 1.常规 属性名称 属性详解 NET CLR 版本 配置应用程序池,以加载特定版本的 .NET CLR.选定的 CLR版本应与应用程序所使用的相应版本的 .NET Framework 对应. ...
- 图的建立以及应用（BFS，DFS，Prim）
关于带权无向图的一些操作 题目:根据图来建立它的邻接矩阵,通过邻接矩阵转化为邻接表,对邻接表进行深度优先访问和广度优先访问,最后用邻接矩阵生成它的最小生成树: 1．输入一个带权无向图(如下面图1和图2 ...
- 基于excel实现接口自动化测试
本文档介绍如何使用excel管理接口测试用例并一键执行的实现方式,其中包括 python 读写excel, request库的基本操作,接口用例的设计 接口用例设计 用例字段描述 被依赖表达式: 示例 ...