PHP框架+gatewayworker实现在线1对1聊天--聊天界面布局+创建websocket连接(5)

文章目录

    • 聊天界面布局
      • html代码
    • 创建websocket连接
    • 为什么要绑定?

聊天界面布局

在View/Index目录下创建index.html
在这里插入图片描述

html代码

<div id="chat"><div id="nbar"><div class="pull-left">与牛德胜正在聊天...</div><div class="pull-right" id="to_user_status"><span>离线</span></div></div><div id="chat_content"><div class="media"><div class="media-left"><img class="media-object avatar" src="/Uploads/avatar/4.jpg"></div><div class="media-body"><h4 class="media-heading">牛德胜</h4><p class="chat_msg_left">对对对                </p></div></div><div class="media_right"><div class="media-body"><h4 class="media-heading">黎明</h4><p class="chat_msg_right">顶顶顶顶                </p></div><div class="media-right"><img class="media-object avatar" src="/Uploads/avatar/1.jpg"></div></div><div class="media"><div class="media-left"><img class="media-object avatar" src="/Uploads/avatar/4.jpg"></div><div class="media-body"><h4 class="media-heading">牛德胜</h4><p class="chat_msg_left">订单                </p></div></div><div class="media_right"><div class="media-body"><h4 class="media-heading">黎明</h4><p class="chat_msg_right">对对对                </p></div><div class="media-right"><img class="media-object avatar" src="/Uploads/avatar/1.jpg"></div></div></div><div class="form-inline" style="position: relative;"><div class="form-group"><div class="input-group"><div class="input-group-addon" onclick="emoj()">表情</div><input type="text" class="form-control" id="msgcontent"><div class="input-group-addon" style="cursor: pointer;" onclick="choose_image()">图片</div><input type="file" name="file" id="file" accept="image/*" style="display: none" onchange="send_image()"></div></div><button type="button" class="btn btn-primary" onclick="send_msg()">发送</button></div>
</div>

页面布局实现效果如下。
在这里插入图片描述
布局是个简单的事儿,重点就是聊天内容展示,左边是对方,右边是自己。这两个每个单独用一个div包裹起来。有新的聊天信息追加的时候比较方便。直接在最后追加。

创建websocket连接

<script>
ws=new WebSocket("ws://127.0.0.1:8282");ws.onmessage=function (e){// json数据转换成js对象var data = eval("("+e.data+")");var type = data.type || '';console.log(data)switch(type){// Events.php中返回的init类型的消息,将client_id发给后台进行uid绑定case 'init':// 利用jquery发起ajax请求,将client_id发给后端进行uid绑定$.post('/chat.php/Chat/bind', {client_id: data.client_id}, function(data){}, 'json');               break;   default :alert(e.data);}}</script>

下面这句在页面加载的时候就创建了websocket连接。

ws=new WebSocket(“ws://127.0.0.1:8282”);

ws.onmessage这个函数是有消息从服务端推送过来的时候就自动接收。

还记得GatewayWorker\Applications\YourApp\Events.php文件里的内容吗,里边的这段代码就是有连接的时候,服务器就会自动回复一条消息,我们将这条消息以json字符串的形式发给客户端。定义了消息的类型init,也就是第一次连接的时候,初始化。
在这里插入图片描述
根据服务端返回的消息,将字符串json转为真的json,然后解析里边的数据

// json数据转换成js对象var data = eval("("+e.data+")");var type = data.type || '';

之后根据返回的数据类型,进行相应的处理。第一次初始化,根据服务端返回的client_id,把当前客户的id和client_id发送给服务端,让服务端把用户id和client_id进行绑定。

switch(type){// Events.php中返回的init类型的消息,将client_id发给后台进行uid绑定case 'init':// 利用jquery发起ajax请求,将client_id发给后端进行uid绑定$.post('/chat.php/Chat/bind', {client_id: data.client_id}, function(data){}, 'json');               break;   default :alert(e.data);}

接下来在Controller文件夹下创建ChatController.php,里边添加一个bind方法,来绑定id和client_id
别忘了引用Gateway,这就是之前添加GatewayClient的原因。有了这个客户端,就可以在PHP的框架里直接对Gatewayworker进行操作。

use GatewayClient\Gateway;

    public function bind(){$client_id=I('post.client_id');// 设置GatewayWorker服务的Register服务ip和端口,请根据实际情况改成实际值(ip不能是0.0.0.0)Gateway::$registerAddress = '127.0.0.1:1238';// 假设用户已经登录,用户uid和群组id在session中$uid      = $_SESSION['user_id'];
// client_id与uid绑定Gateway::bindUid($client_id, $uid);}

到此,就实现了客户端以服务端的连接,并将客户端用户id与client_id进行绑定。

为什么要绑定?

服务端给每个链家创建一个client_id,这个id是一串很长的字符串:7f0000010b5400000006。这种怎么区分谁给谁发送呢。将用户id与client_id绑定后,只要给用户id发送信息,服务端自动找到对应的client_id发送信息。一个用户id可以绑定多个client_id,但是一个client_id只能绑定一个用户id。适用场景如下:
你可以打开多个网页跟同一个人聊天,每打开一个页面,就会创建一个socket连接,就会有一个client_id。都是你一个人聊天,用户的id是同一个。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/891572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

遗传算法与深度学习实战(29)——编码卷积自编码器架构

遗传算法与深度学习实战(29)——编码卷积自编码器架构 0. 前言1. 构建卷积自编码器2. 构建卷积自编码器基因序列3. 解析基因序列构建模型小结系列链接0. 前言 使用遗传算法 (Genetic Algorithm, GA) 构建自编码器 (AutoEncoder, AE) 优化器时,第一步是构建将架构编码为基因…

机器学习基础-卷积的计算

1 掌握卷积计算的基本过程 1.1 单通道单卷积核 如图3所示&#xff0c;现在有一张形状为[5,5,1]的灰度图&#xff0c;我们需要用图3右边的卷积核对其进行卷积处理&#xff0c;同时再考虑到偏置的作用。计算过程如下&#xff1a; 1.2 单通道多卷积核 如下图所示&#xff0c;左…

利用python将图片转换为pdf格式的多种方法,实现批量转换,内置模板代码,全网最全,超详细!!!

文章目录 前言1、img2pdf库的使用1.1 安装img2pdf库1.2 案例演示&#xff08;模板代码&#xff09; 2、Pillow库的使用2.1 pillow库的安装2.2 案例演示&#xff08;模板代码&#xff09; 3、PyMuPDF库的使用3.1 安装pymupdf库3.2 案例演示&#xff08;模板代码&#xff09;3.3 …

Redis--高可用(主从复制、哨兵模式、分片集群)

高可用&#xff08;主从复制、哨兵模式、分片集群&#xff09; 高可用性Redis如何实现高可用架构&#xff1f;主从复制原理1. 全量同步2. 命令传播3. 增量同步 Redis Sentinel&#xff08;哨兵模式&#xff09;为什么要有哨兵模式&#xff1f;哨兵机制是如何工作的&#xff1f;…

Vue el-data-picker选中开始时间,结束时间自动加半小时

效果 思路 查阅elemnet plus官网&#xff0c;日期时间选择器type"datetimerange"这个选中开始时间并没有对应事件会被触发&#xff0c;因此思路更换成type"datetime"的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。 代码 日期时间…

19704 团建

存储哈希表&#xff08;一个键&#xff08;关键词&#xff09;对饮一个值&#xff09; 同步遍历两棵树 数的写入&#xff1a;节点的写入以及边的写入。 #include<bits/stdc.h> using namespace std; int ans0; const int N2e59; int a[N],b[N]; int n,m; int u,v;map&…

二维码文件在线管理系统-收费版

需求背景 如果大家想要在网上管理自己的文件&#xff0c;而且需要生成二维码&#xff0c;下面推荐【草料二维码】&#xff0c;这个系统很好。特别适合那些制造业&#xff0c;实体业的使用手册&#xff0c;你可以生成一个二维码&#xff0c;贴在设备上&#xff0c;然后这个二维码…

超强免费的Linux文件恢复工具R-Linux简介

&#xff08;首发地址&#xff1a;学习日记 https://www.learndiary.com/2024/12/r-linux/&#xff09; 一、Linux 误删除文件恢复的要点 删除文件后到恢复结束前&#xff0c;所在分区尽量避免进一步写操作&#xff1b;选择恰当的恢复工具。如: ext4magic、photorec。这里介绍…

【ArcGISPro/GeoScenePro】裁剪和打包栅格数据

检查并处理扫描地图 数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 使用标准相机或扫描仪创建的数字影像通常存储在 RGB 颜色模型中,这意味着这些影像将由红色、绿色和蓝色三个栅格组成。 此扫描地图在提供给您之前已在坐标系…

嵌入式入门Day35

网络编程 Day2 套接字socket基于TCP通信的流程服务器端客户端TCP通信API 基于UDP通信的流程服务器端客户端 作业 套接字socket socket套接字本质是一个特殊的文件&#xff0c;在原始的Linux中&#xff0c;它和管道&#xff0c;消息队列&#xff0c;共享内存&#xff0c;信号等…

数仓建模:如何进行实体建模?

目录 1 如何进行实体建模? 业务建模 领域建模 逻辑建模 2 实体建模具体步骤 需求分析

爬虫后的数据处理与使用(处理篇)

紧接上文爬虫&#xff0c;我们获取到了一些数据&#xff0c;接下来就是使用和分析了~爬虫阶段式教学——从数据获取到格式化存储&#xff08;附代码与效果图&#xff09;_爬虫网页数据格式化-CSDN博客 为保证数据的正确性和有效性需要对数据进行筛选&#xff0c;保存有效信息&a…

PostgreSQL的备份方式

PostgreSQL 提供多种方式进行备份&#xff0c;适用于不同需求的场景。常用的备份方法如下&#xff1a; 1. 逻辑备份&#xff08;pg_dump 和 pg_dumpall&#xff09; 1.1 使用 pg_dump 备份单个数据库 pg_dump 是 PostgreSQL 内置的逻辑备份工具&#xff0c;可以将数据库导出为…

人工智能之基于阿里云图像人脸融合部署

人工智能之基于阿里云图像人脸融合部署 需求描述 基于阿里云搭建图像人脸融合模型&#xff0c;模型名称&#xff1a;iic/cv_unet-image-face-fusion_damo使用上述模型输出人脸融合照片 模型路径&#xff1a;人脸融合 业务实现 阿里云配置 阿里云配置如下&#xff1a; SD…

【TextIn—智能文档解析与DocFlow票据AI自动化处理:赋能企业文档数字化管理与数据治理的双重利器】

TextIn—智能文档解析与票据AI自动化处理&#xff1a;赋能企业文档数字化管理与数据治理的双重利器 ​ 在数据驱动的时代&#xff0c;企业面临的挑战不仅在于海量数据的整理和响应速度的提高&#xff0c;更在于如何有效管理和利用这些日益增长的海量信息。尤其是在信息日趋多样…

AI大模型系列之七:Transformer架构讲解

目录 Transformer网络是什么&#xff1f; 输入模块结构&#xff1a; 编码器模块结构&#xff1a; 解码器模块: 输出模块结构&#xff1a; Transformer 具体是如何工作的&#xff1f; Transformer核心思想是什么&#xff1f; Transformer的代码架构 自注意力机制是什么…

uni-ui样式修改

因为之前官网uni-ui有些组件的样式不好看&#xff0c;所以要做一些调整&#xff0c;做个记录。用分段器举例~ 官网原生样式 调整后的 首先找到我们的static文件夹&#xff0c;里面一般存着项目的全局样式文件&#xff0c;没有的话自己创一个 uniui.scss /deep/ .segmented-con…

【SqlSugar雪花ID常见问题】.NET开源ORM框架 SqlSugar 系列

系列文章目录 &#x1f380;&#x1f380;&#x1f380; .NET开源 ORM 框架 SqlSugar 系列 &#x1f380;&#x1f380;&#x1f380; 文章目录 系列文章目录一、前言 &#x1f343;二、ORM中使用雪花ID ❄️2.1 普通插入2.2 导航插入2.3 手动调用雪花ID 三、雪花ID重复 问题 …

有序归并(JOIN 简化和提速系列 8)

八、有序归并 我们再来看同维表和主子表的 JOIN&#xff0c;这两种情况的优化提速手段是类似的。 我们前面讨论过&#xff0c;HASH JOIN 算法的计算复杂度&#xff08;即关联键的比较次数&#xff09;是 sum(ni*mi)&#xff0c;比全遍历的复杂度 n*m 要小很多&#xff0c;不过…

详细教程:SQL2008数据库备份与还原全流程!

数据的安全性至关重要&#xff0c;无论是操作系统、重要文件、磁盘存储&#xff0c;还是企业数据库&#xff0c;备份都是保障其安全和完整性的关键手段。拥有备份意味着即使发生误删、系统崩溃或病毒攻击等问题&#xff0c;也能迅速通过恢复功能解决&#xff0c;避免数据丢失带…