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 ...
随机推荐
- Alpha冲刺——序言篇（任务与计划）
Alpha冲刺--序言篇(任务与计划) 1.整个项目预期的任务量 需求规格说明书 架构设计,原型设计,原型改进(给目标用户展现原型,并进一步理解需求) 编码规范完成.平台环境搭建完成.初步架构搭建 队 ...
- js之数组乱序
这是最近面试遇到的,不过忘记了,之前也有印象刷到过这道题,就再次记录一下加深印象吧,听到最多的答案是利用sort方法,不过也有说这种方法不好,利用了快排和插入排序,那就整理下吧 <!DOCTYP ...
- 03_py
3.1 在编程的语境下,函数 (function) 是指一个有命名的.执行某个计算的语句序列 (se-quence of statements) .在定义一个函数的时候,你需要指定函数的名字和语句序列 ...
- AcWing 361. 观光奶牛
01规划 设答案为 \(ans\). 二分答案,设当前二分值为 \(mid\). 设一个环 \(S\) 的边权为 \(t_1, t_2, t_3...\),点权为 \(f_1, f_2, f_3... ...
- Python 中的哈希表
Python 中的哈希表:对字典的理解 有没有想过,Python中的字典为什么这么高效稳定.原因是他是建立在hash表上.了解Python中的hash表有助于更好的理解Python,因为Pytho ...
- 将命令行提示符里的执行结果导出到text文件中
为便于查看和保存命令行提示符里的执行结果, 可以使用 ">" 将执行结果导入到指定.txt文件中. 例如: 在命令行提示符里查看C盘文件,并将结果导入到E盘dir-c-out ...
- Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
本篇参考: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipb ...
- ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...
- css样式规则
在css样式规则中: 1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式. 2.属性和属性值以"键值对"的形式出现. 3.属性是对指定的对象设置的样式 ...
- Spark 源码浅读-SparkSubmit
Spark 源码浅读-任务提交SparkSubmit main方法 main方法主要用于初始化日志,然后接着调用doSubmit方法. override def main(args: Array[St ...