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 ...
随机推荐
- js原生方法filter实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CF1400F - x-prime Substrings
1400F - x-prime Substrings 首先发现 \(x\) 很小,所以发现对应的 x-prime 字符串数也很少,最多的情况是 \(x = 19\),有 2399 个,先爆搜出来. 现 ...
- git使用-merge request开发操作步骤
0. 如果当前不在develop分支,则切换到develop分支 git checkout develop 1. 获取develop分支最新代码 git pull 注意:这一步正常来说应该是一个Fas ...
- C#9.0新特性详解系列之六：增强的模式匹配
自C#7.0以来,模式匹配就作为C#的一项重要的新特性在不断地演化,这个借鉴于其小弟F#的函数式编程的概念,使得C#的本领越来越多,C#9.0就对模式匹配这一功能做了进一步的增强. 为了更为深入和全面 ...
- MySQL锁：02.InnoDB锁
目录 InnoDB锁 InnoDB行锁实现机制 InnoDB隐式.显式锁 InnoDB锁类型 共享锁 排他锁 意向锁 InnoDB锁兼容性 InnoDB行锁范围.粒度 InnoDB行锁粒度一览 意向插 ...
- Azure Service Bus（一）入门简介
一,引言 今天开始学习新的内容 Azure Service Bus(服务总线),其实也叫 "云消息服务",和 RabbitMQ,KafKa的一样都是作为消息通信服务,但是它们直接还 ...
- Known快速开发框架
Known是一个基于.NET开发的快速开发框架,前后端分离,使用极少的第三方组件,开发简单快速,大部分代码可通过代码生成工具自动生成,非常适合单兵作战和小团队开发.前端UI是一个基于JQuery开发的 ...
- python 字符串拼接 + 与 join 的区别
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 python在进行字符串的拼接时,一般有两种方法,一种是使用+直接相加,另一种是使用join a = ...
- .NET Core 使用MediatR CQRS模式 读写分离
前言 CQRS(Command Query Responsibility Segregation)命令查询职责分离模式,它主要从我们业务系统中进行分离出我们(Command 增.删.改)和(Query ...
- asp.net webapi 给字段赋初始值DefaultValue 解决前端传空字符串后台接受不是“”而是NULL
/// <summary> /// 存储ID /// </summary> public Guid SaveID { get; set; } /// <summary&g ...