当前位置: 首页 > news >正文

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是同一个。

相关文章:

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

文章目录 聊天界面布局html代码 创建websocket连接为什么要绑定&#xff1f; 聊天界面布局 在View/Index目录下创建index.html html代码 <div id"chat"><div id"nbar"><div class"pull-left">与牛德胜正在聊天...</div…...

LinuxUbuntu打开VSCode白屏解决方案

解决方法是 以root权限打开VSCode sudo /usr/share/code/code --no-sandbox --unity-launch...

在 ESP 上运行 AWTK

AWTK 基于 esp 的移植。 测试硬件平台为 ESP32-S3-Touch-LCD-4.3&#xff0c;其它平台请根据实际平台自行调整。 安装下载工具 建议下载离线版本 ESP IDF v5.3.2 下载代码 git clone https://github.com/zlgopen/awtk-esp.git cd awtk-esp git clone https://github.com/zlg…...

硬件工程师面试题 21-30

把常见的硬件面试题进行总结&#xff0c;方便及时巩固复习。其中包括网络上的资源、大佬们的大厂面试题&#xff0c;其中可能会题目类似&#xff0c;加强印象即可。 更多硬件面试题&#xff1a;硬件工程师面试题 1-10硬件工程师面试题 11-20 21、单片机最小系统需要什么&#x…...

开源架构的容器化部署优化版

上三篇文章推荐&#xff1a; 开源架构的微服务架构实践优化版&#xff08;New&#xff09; 开源架构中的数据库选择优化版&#xff08;New&#xff09; 开源架构学习指南&#xff1a;文档与资源的智慧锦囊&#xff08;New&#xff09; 我管理的社区推荐&#xff1a;【青云交社区…...

Qt使用CMake编译项目时报错:#undefined reference to `vtable for MainView‘

博主将.h文件和.cpp文件放到了不同的文件目录下面&#xff0c;如下图所示&#xff1a; 于是构建项目的时候就报错了#undefined reference to vtable for MainView&#xff0c;这个是由于src/view目录下的CMake无法自动moc头文件导致的&#xff0c;需要手动moc include/view目录…...

python学习笔记—12—

1. 布尔类型 (1) 定义 (2) 比较运算符 (3) 代码演示 1. 手动定义 bool_1 True bool_2 False print(f"bool_1的内容是&#xff1a;{bool_1}, 类型是&#xff1a;{type(bool_1)}") print(f"bool_2的内容是&#xff1a;{bool_2}, 类型是&#xff1a;{type(bool…...

==和===的区别,被坑的一天

在 JavaScript 中&#xff0c; 和 都用于比较两个值&#xff0c;但它们有一个重要的区别&#xff1a; 1. (宽松相等运算符) 进行比较时&#xff0c;会 自动类型转换&#xff08;也叫做强制类型转换&#xff09;&#xff0c;即如果比较的两个值的类型不同&#xff0c;JavaScr…...

基于 GPUTasker 的 GPU 使用情况钉钉推送机器人实现

引言 https://github.com/cnstark/gputasker 随着 AI 模型的广泛应用&#xff0c;GPU 成为团队中最重要的资源之一。然而&#xff0c;如何实时监控 GPU 的使用情况并及时通知团队是一个值得关注的问题。为了更好地管理显卡资源&#xff0c;本文基于 GPUTasker&#xff0c;实现了…...

Python自学 - 函数初步(内置函数、模块函数、自定义函数)

1 Python自学 - 函数初步(内置函数、模块函数、自定义函数) 1.1 内置函数 几乎所有的编程都会提供一些内置函数&#xff0c;以便完成一些最基本的任务&#xff0c;Python提供了丰富的内置函数&#xff0c;熟悉内置函数可以给工作带来极大便利。   Python官方的内置函数介绍网…...

【生活】冬天如何选口罩(医用口罩,N95, KN95还是KP95?带不带呼吸阀门?带不带活性炭?)

&#x1f4a1;总结一下就是&#xff1a; 日常防护的话&#xff0c;医用口罩就可以啦。要是想长时间佩戴N95&#xff08;KN95&#xff09;口罩的话也可以. 在高风险环境&#xff08;像医院、疫情防控期间&#xff09;&#xff0c;一定要选不带呼吸阀门的N95口罩KN95&#xff09…...

HTML5新特性|01 音频视频

音频 1、Audio (音频) HTML5提供了播放音频文件的标准 2、control(控制器) control 属性供添加播放、暂停和音量控件 3、标签: <audio> 定义声音 <source> 规定多媒体资源,可以是多个<!DOCTYPE html> <html lang"en"> <head><…...

迅为RK3568开发板编译Android12源码包-设置屏幕配置

在源码编译之前首先要确定自己想要使用的屏幕并修改源码&#xff0c;在编译镜像&#xff0c;烧写镜像。如下图所示&#xff1a; 第一步&#xff1a;确定要使用的屏幕种类&#xff0c;屏幕种类选择如下所示&#xff1a; iTOP-3568 开发板支持以下种类屏幕&#xff1a; 迅为 LV…...

力扣hot100——图论

200. 岛屿数量 class Solution { public:int numIslands(vector<vector<char>>& grid) {int ans 0;vector<int> dx { 0, 1, 0, -1 };vector<int> dy { 1, 0, -1, 0 };int n grid.size(), m grid[0].size();vector<vector<int>> …...

Docker- Unable to find image “hello-world“locally

Docker- Unable to find image “hello-world“locally 文章目录 Docker- Unable to find image “hello-world“locally问题描述一. 切换镜像1. 编辑镜像源2. 切换镜像内容 二、 检查设置1、 重启dockers2、 检查配置是否生效3. Docker镜像源检查4. Dokcer执行测试 三、自定义…...

spring-boot启动源码分析(二)之SpringApplicationRunListener

在上一篇《spring-boot启动源码分析&#xff08;一&#xff09;之SpringApplication实例构造》后&#xff0c;继续看了一个月的Spring boot启动源码&#xff0c;初步把流程看完了&#xff0c;接下来会不断输出总结&#xff0c;以巩固这段时间的学习。同时也希望能帮到同样感兴趣…...

ELK入门教程(超详细)

什么是ELK&#xff1f; ELK是Elasticsearch、Logstash、Kibana三大开源框架首字母大写简称(后来出现的filebeat属于beats家族中的一员&#xff0c;可以用来替代logstash的数据收集功能&#xff0c;比较轻量级)&#xff0c;也被称为Elastic Stack。 Filebeat Filebeat是用于转…...

人工智能知识分享第六天-机器学习_​逻辑回归(Logistic Regression)

简介 在机器学习中&#xff0c;分类问题是一种常见的任务&#xff0c;目标是根据输入特征将数据点分配到不同的类别中。为了实现分类&#xff0c;我们需要训练一个分类器&#xff0c;该分类器能够根据输入数据的特征进行预测。 逻辑回归&#xff08;Logistic Regression&…...

基于Springboot + vue实现的校园周边美食探索及分享平台

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…...

初学STM32 --- 外部SRAM

目录 SRAM简介 SRAM特性: XM8A51216 功能框图 8080并口读时序​编辑 8080并口写时序 SRAM 读写操作步骤 FSMC介绍 FSMC时序介绍 FSMC控制器对内核地址映射​编辑 FSMC HAL库相关驱动 SRAM驱动步骤 SRAM简介 静态随机存取存储器&#xff08;Static Random-Access Memory&am…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...