企业自建网站缺,东莞做网页,温州 网站建设公司,同城推广引流平台文章目录 聊天界面布局html代码 创建websocket连接为什么要绑定#xff1f; 聊天界面布局
在View/Index目录下创建index.html
html代码
div idchatdiv idnbardiv classpull-left与牛德胜正在聊天.../div… 文章目录 聊天界面布局html代码 创建websocket连接为什么要绑定 聊天界面布局
在View/Index目录下创建index.html
html代码
div idchatdiv idnbardiv classpull-left与牛德胜正在聊天.../divdiv classpull-right idto_user_statusspan离线/span/div/divdiv idchat_contentdiv classmediadiv classmedia-leftimg classmedia-object avatar src/Uploads/avatar/4.jpg/divdiv classmedia-bodyh4 classmedia-heading牛德胜/h4p classchat_msg_left对对对 /p/div/divdiv classmedia_rightdiv classmedia-bodyh4 classmedia-heading黎明/h4p classchat_msg_right顶顶顶顶 /p/divdiv classmedia-rightimg classmedia-object avatar src/Uploads/avatar/1.jpg/div/divdiv classmediadiv classmedia-leftimg classmedia-object avatar src/Uploads/avatar/4.jpg/divdiv classmedia-bodyh4 classmedia-heading牛德胜/h4p classchat_msg_left订单 /p/div/divdiv classmedia_rightdiv classmedia-bodyh4 classmedia-heading黎明/h4p classchat_msg_right对对对 /p/divdiv classmedia-rightimg classmedia-object avatar src/Uploads/avatar/1.jpg/div/div/divdiv classform-inline styleposition: relative;div classform-groupdiv classinput-groupdiv classinput-group-addon onclickemoj()表情/divinput typetext classform-control idmsgcontentdiv classinput-group-addon stylecursor: pointer; onclickchoose_image()图片/divinput typefile namefile idfile acceptimage/* styledisplay: none onchangesend_image()/div/divbutton typebutton classbtn btn-primary onclicksend_msg()发送/button/div
/div页面布局实现效果如下。 布局是个简单的事儿重点就是聊天内容展示左边是对方右边是自己。这两个每个单独用一个div包裹起来。有新的聊天信息追加的时候比较方便。直接在最后追加。
创建websocket连接
script
wsnew WebSocket(ws://127.0.0.1:8282);ws.onmessagefunction (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连接。 wsnew 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_idI(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是同一个。
