0 回复

仿微信h5+vue+php即时通讯聊天源码

webim 发表了文章 • 0 个评论 • 285 次浏览 • 2019-10-09 18:31 • 来自相关话题

介绍: 泡泡IM是一套完整的h5+vue+php仿微信的即时通讯聊天源码 ,包含完整的前端、后端、数据库、文档。项目完全独立,不依赖第三方即时通讯云,可直接部署使用。此h5仿微信即时聊天源码可用huilder等软件打包成app,安卓 IOS都可使用 ...查看全部

介绍:
泡泡IM是一套完整的h5+vue+php仿微信的即时通讯聊天源码 ,包含完整的前端、后端、数据库、文档。项目完全独立,不依赖第三方即时通讯云,可直接部署使用。此h5仿微信即时聊天源码可用huilder等软件打包成app,安卓 IOS都可使用。文档全面,代码精简规范、低耦合、注释全面、接口清晰,非常有利于二次开发。此h5即时通讯聊天源码对外销售,购买请进入 泡泡IM官网


技术特点:
界面类似微信界面。后端即时通讯基于高性能即时通讯框架workerman开发,api接口则基于tp5开发。
前端基于vue开发,前后端分离,模块化开发。以websocket协议完成即时通讯,保证消息数据即时传输。自带网络检测,断网自动重连,保证消息可靠送达。支持SSL/TLS通信隧道加密。即时通讯部分与业务逻辑高度解偶。
 
功能:
1、支持发语音、文字、图片、表情、文件
2、支持一对一私聊和多对多群聊
3、群聊支持建群、退群、解散群组、禁言、踢人、拉人进群、群备注等功能
4、个人信息支持更改昵称、头像、个性签名等
5、支持查看历史消息、离线消息
6、支持好友查找、好友申请、同意好友申请、拒绝申请、删除好友,好友备注
7、支持消息撤回,脏字过滤
8、支持通讯录,按字母顺序排列
9、管理后台功能
 
界面效果:



 

 

 

 

 

 

 

 

 

 

 

 

 


 购买h5+vue+php仿微信聊天的即时通讯源码请点击进入
 
 原文连接:泡泡IM

2 回复

workerman实现微信公众号带参数二维码扫码识别用户

efnic 发表了文章 • 2 个评论 • 274 次浏览 • 2019-08-27 10:47 • 来自相关话题

完整功能体验 查看源代码,有完整的通讯流程实现。 https://iyuu.cn 发表在自己的博客 https://www.iyuu.cn/archives/202/  #说明 此功能是利 ...查看全部

完整功能体验


查看源代码,有完整的通讯流程实现。
https://iyuu.cn
发表在自己的博客
https://www.iyuu.cn/archives/202/
 #说明
此功能是利用微信公众号带参数二维码,实现扫码识别用户,并且实时通知前端扫码状态,并非ajax轮询!从而进行后续的其他业务逻辑。


工作流程详解


 1. 用workerman框架,编写websocket服务后端监听2129端口,进程启动同时再监听一个内部通讯5678端口,2129端口等待前端页面发起连接:https://www.iyuu.cn/usr/index.html
 2. 用户进入前端页面,自动连接wss://www.iyuu.cn:2129;
 3. 用户点击获取二维码,请求二维码生成接口:https://www.iyuu.cn/qrcode,返回二维码参数:
  json {"ticket":"gQH47zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAycTMtdzlMVEhlYzIxcF9jQU50MWsAAgQHjGRdAwR4AAAA","expire_seconds":120,"uid":1735536450}  
  注:uid通过函数rand(1,4294967200)生成并查询缓存,确保唯一后放入Redis缓存。
 4. 把二维码参数,转发到websocket服务wss://www.iyuu.cn:2129,websocket服务保存转发来的信息建立映射关系;
 5. 显示二维码:https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket={data.ticket},用户扫码
 6. 微信开发者接口会收到扫码结果,获取到场景值ID;
 7. 根据场景值ID从Redis缓存取出ticket校验通过,执行业务逻辑(登录、绑定、解绑、积分等等),并通过5678端口实时通知用户扫码后的处理结果。


完整Websocket服务代码


<?php
use Workerman\Worker;
use Workerman\Lib\Timer;
define("APP_PATH", dirname(__FILE__));
// 心跳间隔40秒
define('HEARTBEAT_TIME', 40);
require_once __DIR__ . '/../../vendor/autoload.php';
require_once APP_PATH . '/Library/Function.php';
$context = array(
'ssl' => array(
// 请使用绝对路径
'local_cert' => __DIR__ . '/../../Cert/www.iyuu.cn.crt',
'local_pk' => __DIR__ . '/../../Cert/www.iyuu.cn.key',
'verify_peer' => false,
//'allow_self_signed' => true, //如果是自签名证书需要开启此选项
)
);
$worker = new Worker('websocket://0.0.0.0:2129', $context);
$worker->transport = 'ssl';
$worker->name = 'WebSocket';
/*
* 注意这里进程数必须设置为1,否则会报端口占用错误
* (php 7可以设置进程数大于1,前提是$inner_text_worker->reusePort=true)
*/
$worker->count = 1;
// 新增加一个属性,用来保存uid到connection的映射(uid是用户id或者客户端唯一标识)
$worker->uidConnections = array();
// 当有客户端连接时
$worker->onConnect = function($connection)
{
/*
//定时10秒关闭这个链接,需要10秒内发认证并删除定时器阻止关闭连接的执行
$connection->auth_timer_id = Timer::add(10, function(){
$connection->close();
});

Timer::del($connection->auth_timer_id);
*/
};

// worker进程启动后创建一个text Worker以便打开一个内部通讯端口
$worker->onWorkerStart = function($worker)
{
sc('WebSocket服务进程启动成功!');
// 开启一个内部端口,方便内部系统推送数据,Text协议格式 文本+换行符
$inner_text_worker = new Worker('text://0.0.0.0:5678');
$inner_text_worker->onMessage = function($connection, $buffer)
{
global $worker;
if (empty($buffer)) return;
// $data数组格式,里面有uid,表示向那个uid的页面推送数据
$data = json_decode($buffer, true);
if (isset($data['uid'])) {
$uid = $data['uid'];
//uid + ticket双重安全验证(防止前端冒用随机uid)
$data['ticket'] = isset($data['ticket'])&&$data['ticket'] ? $data['ticket'] : '';
$conn = $worker->uidConnections[$uid];
$ticket = isset($conn->ticket)&&$conn->ticket ? $conn->ticket : '';
if($data['ticket'] != $ticket){
return;
}
// 通过workerman,向uid的页面推送数据
$ret = sendMessageByUid($uid, $buffer);
// 返回推送结果
$connection->send($ret ? 'ok' : 'fail');
}
return;
};
// ## 执行监听 ##
$inner_text_worker->listen();
// 进程启动后设置一个每秒运行一次的定时器
Timer::add(1, function()use($worker){
$time_now = time();
foreach($worker->uidConnections as $connection) {
// 有可能该connection还没收到过消息,则lastMessageTime设置为当前时间
if (empty($connection->lastMessageTime)) {
$connection->lastMessageTime = $time_now;
continue;
}
// 上次通讯时间间隔大于心跳间隔,则认为客户端已经下线,关闭连接
if ($time_now - $connection->lastMessageTime > HEARTBEAT_TIME) {
if(isset($connection->uid))
{
// 连接断开时删除映射
unset($worker->uidConnections[$connection->uid]);
}
$connection->close();
}
}
});
//每天重启进程
Timer::add(86400, function()use($worker)
{
sc('WebSocket服务进程定时重启任务,执行成功!');
Worker::stopAll();
});
};

// 当有客户端发来消息时执行的回调函数
$worker->onMessage = function($connection, $data)
{
global $worker;
// 给connection临时设置一个lastMessageTime属性,用来记录上次收到消息的时间
$connection->lastMessageTime = time();
// 客户端传递的是json数据
if (empty($data)) return;
$message = json_decode($data, true);
if(empty($message)) return;
if(isset($message['cmd'])) {
// 根据类型执行不同的业务
switch($message['cmd'])
{
case 'ping':
return;
case 'login':
return;
case 'sms':
return;
case 'mail':
return;
default:
return;
}
}else{
// 判断当前客户端是否已经验证,即是否设置了uid
if(isset($connection->uid))
{
//上次uid和ticket过期
if (isset($message['uid']) && ($message['uid']!=$connection->uid)) {
unset($worker->uidConnections[$connection->uid]);
}
}
if (isset($message['uid']) && $message['uid']) {
// 没验证的话把第一个包当做uid
$connection->uid = $message['uid'];
if (isset($message['ticket'])) {
//带参数二维码的ticket
$connection->ticket = $message['ticket'];
}
/* 保存uid到connection的映射,这样可以方便的通过uid查找connection,
* 实现针对特定uid推送数据
*/
$worker->uidConnections[$connection->uid] = $connection;
$connection->send($data);
return;
} else {
//不带uid的消息
# code...
}
}
};

// 当有客户端连接断开时
$worker->onClose = function($connection)
{
global $worker;
if(isset($connection->uid))
{
// 连接断开时删除映射
unset($worker->uidConnections[$connection->uid]);
}
};
// 进程关闭时
$worker->onWorkerStop = function($worker)
{
//通知运维人员
//sc('WebSocket服务进程退出,如非定时重启,请检查!');
};
// 针对uid推送数据
function sendMessageByUid($uid, $message)
{
global $worker;
if(isset($worker->uidConnections[$uid]))
{
$connection = $worker->uidConnections[$uid];
$connection->send($message);
return true;
}
return false;
}

// 如果不是在根目录启动,则运行runAll方法
if(!defined('GLOBAL_START'))
{
Worker::runAll();
}

前端页面关键代码


<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8" />
<title>微信公众号模板消息通知Token申请页 - 大卫科技blog www.iyuu.cn</title>
<meta name="keywords" content="大卫科技blog,www.iyuu.cn" />
<meta name="description" content="微信公众号模板消息通知Token申请页" />
<meta name="copyright" content="海南大卫电子科技有限公司" />
<meta name="author" content="大卫" />
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="panel">
<div id="header">
<h1>微信公众号模板消息通知<span>Token申请页</span></h1>
<noscript><h1>你的浏览器不支持 JavaScript,请启用 JavaScript 后访问。</h1></noscript>
<address>制作 by <a href="http://www.iyuu.cn/">大卫科技blog</a></address>
</div>
<div id="token" style="display: none;"></div>
<div id="qrcode">点击下面的按钮,获取微信二维码!</div>
<div id="expire" style="display: none;">请尽快使用手机微信扫码,二维码<span id="dd">120</span>秒后过期。</div>
<a class="J_scanWeixin">获取微信二维码</a>
</div>
<script type="text/javascript">
var ws,ping_t,qrcode_t,expire_t;
var WEB_URL = {
QRCODE_IMG_URL : 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=',
wshost : 'wss://www.iyuu.cn:2129', //websocket服务器地址
};
// 连接服务器
function connect() {
ws = new WebSocket(WEB_URL.wshost);
ws.onopen = function(e) {
console.log(ws);
console.log("Server onOpen",e);
ping_t = setInterval(function(){
ws.send('{"cmd":"ping"}');
console.log("ping Server");
}, 30000);
};
ws.onmessage = onmessage;
ws.onclose = function(e) {
console.log("Server onClose",e.data);
//关闭定时器
if (typeof ping_t !="undefined")
{
clearInterval(ping_t);
console.log("clearInterval ping_t");
}
if (typeof qrcode_t !="undefined")
{
clearInterval(qrcode_t);
console.log("clearInterval qrcode_t");
}
};
ws.onerror = function(e) {
connect();
console.log("Server onError",e.data);
};
}

function onmessage(e)
{
var timestamp = new Date().getTime();
var data = JSON.parse(e.data); //JSON.parse() 将 JSON字符串转换为对象。
if (typeof data.cmd != 'undefined')
{
switch(data.cmd){
case 'login':
window.location='/admin/login.php?token='+data.token;
break;
case 'scan':
console.log('Server Cmd scan',e.data);
break;
case 'bind':
console.log('Server Cmd bind',e.data);
break;
default: //服务器下发其他指令
console.log('Server Cmd?',e.data);
break;
}
}else{
if (typeof data.token != 'undefined')
{
clearInterval(expire_t);
clearInterval(qrcode_t);
$("#token").html("<h3>您的Token是:"+ data.token +"</h3><br /><h3>请求URL是:https://www.iyuu.cn/"+ data.token +".send</h3>");
$("#token").show();
$("#qrcode").hide();
$("#expire").hide();
$(".J_scanWeixin").hide();
}
}
console.log('收到Server消息',e.data);
}
connect();
//dom载入完毕执行
$(function(){
//点击按钮,显示二维码
$('.J_scanWeixin').click(function(){
if (ws.readyState == 1)
{
$.get("/qrcode",function(ret){
ws.send(ret); //发送uid
var data = JSON.parse(ret);
$("#qrcode").html("<img class='' src='"+ WEB_URL.QRCODE_IMG_URL + escape(data.ticket) +"' width='375' height='375' />");
$(".J_scanWeixin").hide(); //隐藏获取二维码按钮
$("#qrcode").show();
$("#expire").show(); //显示倒计时
//扫码提示
qrcode_t = setTimeout(function(){
$("#qrcode").hide();
$("#expire").hide();
$(".J_scanWeixin").show();
}, data.expire_seconds*1000);

var dd = data.expire_seconds;
expire_t = setInterval(function(){
if(dd <=1){
clearInterval(expire_t);
}
dd--;
$("#dd").html("<b>"+ dd +"</b>");
}, 1000);
});
}else{
$("#qrcode").html("<b>Websocker链接失败,请刷新页面重试!</b>");
$(".J_scanWeixin").hide(); //隐藏获取二维码按钮
}
});
});
</script>
</body>
</html>

执行方法:


 
    /磁盘/路径/php /路径/start_wss.php start -d

2 回复

workerman聊天室案例,入门必备

lovemy12 回复了问题 • 5 人关注 • 2019-06-01 20:12 • 来自相关话题

0 回复

基于workerman+gatawayworker+thinkphp5搭建的客服系统

shmilylbelva 发表了文章 • 0 个评论 • 507 次浏览 • 2019-04-19 15:22 • 来自相关话题

laykefu thinkphp5+Gatewayworker搭建的web客服系统 体验地址:[url=https://links.jianshu.com/go?to=http%3A%2F%2Flaykefu.guoshanchina. ...查看全部

laykefu
thinkphp5+Gatewayworker搭建的web客服系统
体验地址:[url=https://links.jianshu.com/go?to=http%3A%2F%2Flaykefu.guoshanchina.com]http://laykefu.guoshanchina.com[/url]
github仓库:[url=https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fshmilylbelva%2Flaykefu]https://github.com/shmilylbelva/laykefu[/url]1.客户端接入
1、添加laykefu.css样式文件[code][code] <link href="http://laykefu.guoshanchina.com/static/customer/css/laykefu.css"; rel="stylesheet" type="text/css" />
[/code][/code]
2、添加jquery.js和laykefu.js 文件[code][code]<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>;
<script src="http://laykefu.guoshanchina.com/static/customer/js/laykefu.js"></script>;
[/code][/code]
3、添加html目标代码 id="show-laykefu",样式可根据需求自定义[code][code]<div class="laykefu-min">咨询客服</div>
[/code][/code]
默认显示一个客服
4、初始化laykefu[code][code] laykefu.init({
group: 1,//客服分组
socket: '127.0.0.1:7272',//聊天服务器地址
face_path:'/static/customer/images/face',//表情包路径
upload_url:'/index/upload/uploadImg',//图片上传路径
});


[/code][/code]
5、如果需要展示多个客服,那么需要这么修改[code][code]<div class="laykefu-min" data-group="1" >售前客服</div>
<div class="laykefu-min" data-group="2" style="margin:100px">售后客服</div>


[/code][/code]
初始化前需要先获取group的值[code][code]$(".laykefu-min").click(function(){
var group = $(this).attr('data-group');
laykefu.init({
group: group,//客服分组
socket: '127.0.0.1:7272',//聊天服务器地址
face_path:'/static/customer/images/face',//表情包路径
upload_url:'/index/upload/uploadImg',//图片上传路径
});
});
[/code][/code]
6、可选参数
可配置参数如下[code][code] laykefu.init({
uid: '',//客户id
name: '',//客户昵称
group: '',//客服分组
avatar: '',//客户头像
socket: '',//聊天服务器地址
face_path:'',//表情包路径
upload_url:'',//图片上传路径
height:'',//窗口高度
width:'',//窗口宽度
});


[/code][/code]
5、关联已有账户系统
默认情况下咨询的客户是随机分配账户信息,如果你的平台有账户系统,那么可以在初始化的时候传递uid和name即可2.服务端配置
1、安装依赖[code][code]composer install
[/code][/code]
2、配置环境
修改目录下.env信息
3、启动gatawayworker相关服务
如果你是在windows上运行的话,直接双击[code]/vendor/workerman/Conf/start_for_bat.bat[/code]即可
如果你是在linux或mac上运行的话,请进入[code]/vendor/workerman/Conf/[/code]目录,然后运行[code][code]php start.php start -d
[/code][/code]
开启服务
命令如下
启动
以debug(调试)方式启动
php start.php start
以daemon(守护进程)方式启动
php start.php start -d
停止
php start.php stop
重启
php start.php restart
平滑重启
php start.php reload
查看状态
php start.php status
查看连接状态
php start.php connections其他信息
客服地址:host/service
账户密码:客服小美 123456 //售前客服
客服小丽 123456 //售后客服
后台管理地址:host/admin
账户密码:admin admin

3 回复

thinkphp5 workerman开发的在线聊天室

alber1986 发表了文章 • 3 个评论 • 1630 次浏览 • 2018-12-07 12:17 • 来自相关话题

thinkphp5 workerman开发的在线聊天室,实现多人在线网页聊天 [img]http://yanshi.sucaihuo.com//jquery/34/3448/big.jpg[/img] 我暂时放我桌面的 就以我桌面为例 ...查看全部

thinkphp5 workerman开发的在线聊天室,实现多人在线网页聊天


[img]http://yanshi.sucaihuo.com//jquery/34/3448/big.jpg[/img]


我暂时放我桌面的 就以我桌面为例 windows的 linux操作没啥区别 !
windows进入cd命令进入根目录输入php server.php start 启动 如果是linux请删除 workerman for win 的那个目录文件 启动方式端口根目录命令启动与windows一样
此版本只是建议版的聊天,如需后续开发自己根据demo添加相关功能。
 
thinkphp项目怎么打开我就不用说了吧,不会自己百度!首页文件在index模块下面的index/index.html


演示和下载地址:[url]http://www.sucaihuo.com/php/3448.html[/url]

0 回复

物联网云打印机-基于workerman

云打印 发表了文章 • 0 个评论 • 922 次浏览 • 2018-10-27 22:33 • 来自相关话题

易联云依托云计算服务器,打造一套跨地域跨网络的一个打印平台。易联云较于传统打印机不同, 传统打印机需要依赖设备驱动、有线、专业的人负责打印,而易联云云打印基于workerman(gatewayWorker)开发的一套服务端打印程序,后台管理提供打印机一系列数据 ...查看全部

易联云依托云计算服务器,打造一套跨地域跨网络的一个打印平台。易联云较于传统打印机不同, 传统打印机需要依赖设备驱动、有线、专业的人负责打印,而易联云云打印基于workerman(gatewayWorker)开发的一套服务端打印程序,后台管理提供打印机一系列数据显示,包括打印机状态、打印机信息、打印数据统计、打印订单统计、打印机温度、打印机重打、按键打印等特色功能。 对外提供接口方式打印,目前有医院、ktv、餐饮、商城、酒店、加油站等场景得到应用,包括目前最火的三大外卖平台提供打印应用,物流货运订单打印应用。
 
依托于workerman的高性能、高稳定性、高可扩展性,易联云成功研发并发布了多款云打印机,目前仅用3台云服务器便实现了近10万设备在线,日处理请求8000万。项目自2013年以来累计售出数十万台设备。


图片 图片 图片
 
相关连接
易联云官网
产品购买-京东