Thinkphp5使用workerman、socket、websocket、layui、layim建立即时通讯

socket 同时被 3 个专栏收录
1 篇文章 0 订阅
4 篇文章 0 订阅
1 篇文章 0 订阅

在开始之前,有句话想说,曾经我以为socket会很难入门,所以为了节省时间,使用了ajax轮询的方式,最近项目不是很多,想起来优化一下曾经的项目,就准备引入socket代替ajax轮询,从开始到发出第一句话并接收处理用了大概一天时间,socket并不可怕,可怕的是我当初畏惧它的心。
好了,废话不多说,开始干活。

环境:阿里云ECS(windows) + Thinkphp5.0.24

在开始之前要先确定tp版本,tp5.0.24应该使用topthink/think-worker的 1.0 版本,刚搭好socket环境的时候,这个问题困扰我很久才解决,就是版本问题,tp5是不能使用高版本的think-worker的。
然后以下是我一步一步试验出来的流程:
一、要在服务器上开放端口,具体方法就是win+r -> 搜索防火墙 -> 高级设置 -> 入站规则 -> 新建规则 -> 端口,例如12138 -> 下 一步…… -> 保存
二、如果是阿里云ECS,要在ECS中建立安全组,ECS控制台 -> 具体的某个服务器 -> 安全组设置 -> 将刚刚开放的12138端口加入到安全组中
三、别忘了重启服务器,不知道这步适不适用于所有情况,反正我的服务器没重启端口就一直不生效,也是困扰了很久
端口配置完成之后,就要开始引包了,推荐使用composer引入
composer的具体使用方法请百度
项目引入成功后,可以测试一下端口是否可以成功ping通

端口通过之后就可以开始配置项目了:
在项目的访问根目录写一个开启服务的文件server.php:

#!/usr/bin/env php
<?php
define('APP_PATH', __DIR__ . '/../application/');
define('BIND_MODULE','admin/Socket');
// 加载框架引导文件
require __DIR__ . '/../thinkphp/start.php';

server.php第四行代表具体workerman初始化文件在application/admin/controller下的socket.php,socket.php示例:

<?php
namespace application\admin\controller;
use think\worker\Server;
use Workerman\Lib\Timer;

error_reporting(E_ERROR | E_PARSE);
class Socket extends Server{
    protected $socket = 'websocket://0.0.0.0:12138'; //0.0.0.0表示内部、外部等均可访问
    protected $processes = 1; //因为业务需要向指定ID发送消息,此处进程数必须为1,若不需要可设置其他值
	protected $uidConnections = [];
	
	
    /**
     * 收到信息
     * @param $connection
     * @param $data
     */
    public function onMessage($connection, $data){
    	global $worker;
	    if(!isset($connection -> uid)){
	       	$connection -> uid = $data['u_id'];
	       	/* 
		    * 保存uid到connection的映射,这样可以方便的通过uid查找connection,
	        * 实现针对特定uid推送数据
	        */
	       	$worker -> uidConnections[$connection -> uid] = $connection;
	    }
		$connection -> lastMessageTime = time();
		
		//此处添加个人的业务代码,例如对数据的处理、对发送者的反馈或向对方发送消息等操作





    }

	//向指定ID发送消息
	private function sendMessageByUid($uid, $message){
	    global $worker;
	    if(isset($worker -> uidConnections[$uid])){
	        $worker -> uidConnections[$uid] -> send($message);
	    }
	}
	
    /**
     * 当连接建立时触发的回调函数
     * @param $connection
     */
    public function onConnect($connection){
		//此处可以判断连接数等	
    	
		
    }

    /**
     * 当连接断开时触发的回调函数
     * @param $connection
     */
    public function onClose($connection){
        global $worker;
	    if(isset($connection -> uid)){
	        // 连接断开时删除映射
	       unset($worker -> uidConnections[$connection -> uid]);
	    }
    }

    /**
     * 当客户端的连接上发生错误时触发
     * @param $connection
     * @param $code
     * @param $msg
     */
    public function onError($connection, $code, $msg){
        echo "error $code $msg\n";
    }

    /**
     * 每个进程启动
     * @param $worker
     */
    public function onWorkerStart($worker){
    	//进程启动时加入对每个连接的心跳判断,若55秒内没有对服务器发起过心跳或其他任何请求,则断开连接
    	Timer::add(1, function()use($worker){
	        $time_now = time();
	        foreach($worker -> connections as $connection) {
	            // 有可能该connection还没收到过消息,则lastMessageTime设置为当前时间
	            if (empty($connection -> lastMessageTime)) {
	                $connection -> lastMessageTime = $time_now;
					$u_ids[] = $connection -> uid;
	                continue;
	            }
	            // 上次通讯时间间隔大于心跳间隔,则认为客户端已经下线,关闭连接
	            if ($time_now - $connection->lastMessageTime > 55) {
	                $connection -> close();
	            }
			}
	    });
    }
}

每次使用时,需要用命令行手动运行server.php来开启服务:
1.在cmd命令行中使用cd来进入到server.php所在目录
2.运行 php server.php 来开启服务,服务开启成功后,如下图提示:
在这里插入图片描述
需要注意的是,每次socket.php的代码更改后,需要重新开启一次服务,否则新代码将不会执行

后端配置完成后,开始配置前端,此处给出的是websocket,基于layui的示例。layui是一款优秀的前端框架,layui的即时通讯layim极为方便的解决了聊天界面的复杂实现且扩展容易。
layim的使用及引入请参考官方网站:layui

//首先判断浏览器是否支持websocket
if(typeof(WebSocket) == 'undefined'){
	layer.msg('你的浏览器不支持 WebSocket,无法进行聊天功能,推荐使用Google Chrome、Mozilla Firefox、360浏览器及QQ浏览器等');
}
//layui使用
layui.use('layim', function(layim){
	//layim的初始化配置
	layim.config({
		brief: false,//是否简约模式(如果true则不显示主面板)
    	title: '客服会话', //主面板最小化后显示的名称
    	min: false, //用于设定主面板是否在页面打开时,始终最小化展现
    	isAudio: false, //是否开启聊天工具栏音频
    	isVideo: false, //是否开启开启聊天工具栏视频
    	notice: false, //是否开启桌面消息提醒,即在浏览器之外的提醒
    	voice: false, //不开启声音提示
    	isfriend: true, //是否开启好友
    	isgroup: false, //是否开启群组
    	maxLength: 3000, //可允许的消息最大字符长度
  		chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html', //历史记录模板
    	init: { //获取主面板列表信息
    		url: '', //获取好友列表的接口地址
		  	type: 'get', //默认get,一般可不填
		  	data: { 
		  		//额外参数
		  		
		  	}
    	},
    	uploadImage: {
		  	url: '', //图片上传地址
		} 
 
  	});
	var so = new WebSocket('ws://域名或IP:12138');
	//websocket心跳
	var heartCheck = {
	    timeout: 55000, //55秒心跳一次,告诉服务器,这个连接还接着用
	    timeoutObj: null,
	    reset: function(){
	        clearTimeout(this.timeoutObj);
	    	this.start();
	    },
	    start: function(){
	        this.timeoutObj = setTimeout(function(){
				console.log('我心跳了');
	        }, this.timeout);
	    },
	    remove: function(){
	    	clearTimeout(this.timeoutObj);
	    }
	}
	
	//连接成功时触发
	so.onopen = function(){
		console.log('我上线了');
		//开启心跳
    	heartCheck.start();
	};
	//so.readyState属性值
//	0 :对应常量CONNECTING (numeric value 0),
//	 正在建立连接连接,还没有完成。The connection has not yet been established.
//	1 :对应常量OPEN (numeric value 1),
//	 连接成功建立,可以进行通信。The WebSocket connection is established and communication is possible.
//	2 :对应常量CLOSING (numeric value 2)
//	 连接正在进行关闭握手,即将关闭。The connection is going through the closing handshake.
//	3 : 对应常量CLOSED (numeric value 3)
//	 连接已经关闭或者根本没有建立。The connection has been closed or could not be opened.
  	so.onclose = function(){
    	console.log('会话已关闭');
    	heartCheck.remove();
    }
    //发送消息时执行
  	layim.on('sendMessage',function(res) {
		var mine = res.mine; //包含我发送的消息及我的信息
		var to = res.to; //对方的信息
		so.send(JSON.stringify({
			//可加其他参数
			type: 'chatMessage',//随便写,需要时对应上即可
			data: res
		}));
	});
	//监听收到的聊天消息
	so.onmessage = function(res) {
		//重置心跳
		heartCheck.reset();
		//官方示例是JSON.parse(),我在使用的时候不生效,试了不少方法,随后eval()可以解析
		var msg_res = eval('('+ res.data +')');
		//以下为我写的业务代码,收到消息时有code,并对参数进行了处理
		if(msg_res.code == 200){
			if(msg_res.addfriend == 1){
				//添加好友
				layim.addList(msg_res);
			}else if(msg_res.send == 1){
				//系统消息
				if(msg_res.system == 1){
					layim.getMessage({
					  	system: true
					  	,id: msg_res.to_id
					  	,type: "friend"
					  	,content: msg_res.msg
					});
				}else{
					layim.getMessage(msg_res);
				}
			}
		}else{
			//弹出框报错
			layer.msg(msg_res.msg);
		}
	};
	
});

以上就是socket的简单使用方法,更多逻辑操作请参照自身的业务。本文只是为了解决一些简单的入门问题,重在抛砖引玉,各位看官如有意见及建议请留言,在下必然回复您的厚爱。

<!--结束,谢谢,再见-->
  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

ScorpionFong

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值