资讯专栏INFORMATION COLUMN

使用Websocket框架之GatewayWorker开发电商平台买家与卖家实时通讯

Baoyuan / 3640人阅读

摘要:我们的平台上有虚拟商品和实体商品两大分类,当时也考虑到了消息的读取状态。商家发送时间是否已读。看前端代码当前的所有代码并不是最终的,目前只是阶段性开发,后期在项目中逐步完善。

前段时间公司提了一个新的需求,在商品的详情页要实现站内买家和商品卖家实时通讯的功能以方便沟通促成交易,要开发此功能当时首先考虑到的就是swoole和workerman了,从网上大概了解了一下关于这两款工具的阐述,功能都是相当强大的,考虑到项目的进度问题,还是选择上手容易比较快的GatewayWorker。

先看一下我们前端设计高大上的模板,分别是用户和卖家后台。 功能还是比较全的,几乎模仿的是QQ。


业务上的大概需求是,用户在进入某个商品详情页下,给用户提供一个和卖家沟通的接口,根据商品的ID找到对应的卖家,类似于淘宝,还有发送图片,发送对应的商品链接;商户后台也差不多。

我们的平台上有虚拟商品和实体商品两大分类,当时也考虑到了消息的读取状态。我的表最初设计如下,没有加任何的索引,考虑的或许也不够周全,有见地的前辈还望指点一二!

</>复制代码

  1. DROP TABLE IF EXISTS `hp_chat_log`;
  2. CREATE TABLE `hp_chat_log` (
  3. `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT "聊天记录表主键id",
  4. `user_id` int(10) unsigned NOT NULL DEFAULT "0" COMMENT "用户id",
  5. `merchant_id` varchar(15) COLLATE utf8_unicode_ci NOT NULL DEFAULT "" COMMENT "商家id",
  6. `send_message` text COLLATE utf8_unicode_ci NOT NULL,
  7. `send_message_type` tinyint(1) NOT NULL DEFAULT "1" COMMENT "发送消息类型(1:普通文本;2:商品链接,3:用户发送图片)",
  8. `sender` tinyint(1) NOT NULL DEFAULT "1" COMMENT "发送方。1:用户。2:商家",
  9. `send_time` int(11) NOT NULL DEFAULT "0" COMMENT "发送时间",
  10. `read_status` tinyint(1) unsigned NOT NULL DEFAULT "0" COMMENT "是否已读。0:未读取。1:已读取",
  11. `acc_isonline` tinyint(1) NOT NULL DEFAULT "0" COMMENT "接收方是否在线 (0:不在线;1:在线)",
  12. PRIMARY KEY (`id`)
  13. ) ENGINE=MyISAM AUTO_INCREMENT=157 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

模板有了,表设计好了,接下来就是搭建服务了,当前项目开发的框架用的是TP5,选择的Websocket框架是GatewayWorker框架,关于GatewayWorker与TP5的整合方法可以看我的这篇文章,讲到了在Linux和

Windows下的整合安装。

</>复制代码

  1. http://www.cnblogs.com/wt645631686/p/7219519.html

整合好了之后需要根据当前服务器的一些端口配置在修改一些默认的配置,因为需要客户端通过指定的端口建立连接。

TP5整合好了之后Gateway和workerman的主体目录结构都在TP5的框架目录vendor下的workerman目录下。需要修改里面gateway目录下的一些文件的端口及IP地址配置。

配置完成之后,进入项目目录,按照workerman官方手册提供的使用方法,用命令php start.php start启动socket服务,如以下截图,分别是1238和8282端口。当然可以在后台运行,详细的使用方法请参考手册。

启动好了之后那么就需要在客户端开始下手了,我们项目里是在前端页面里用建立的链接。看前端代码

当前的所有代码并不是最终的,目前只是阶段性开发,后期在项目中逐步完善。

</>复制代码

  1. var ws;
  2. // 连接服务端
  3. function connect() {
  4. // 创建websocket
  5. ws = new WebSocket("ws://"+document.domain+":8282");  //当时为了方便以后的维护,这里在php的全局文件里定义了一个常量来定义ip,后来本地开发完提交到linux服务器环境之后发现链接失败!
  6. console.log(ws);
  7. ws.onopen = onopen;
  8. ws.onmessage = onmessage;
  9. ws.onclose = function(e) {
  10. console.log(e);
  11. console.log("连接关闭,定时重连");
  12. connect();
  13. };
  14. ws.onerror = function(e) {
  15. console.log(e);
  16. console.log("出现错误");
  17. };
  18. }
  19. // 握手
  20. function onopen()
  21. {
  22. var joint = "{"type":"handshake","role":"user"}";
  23. ws.send(joint);
  24. }
  25. // 服务端发来消息时
  26. function onmessage(e)
  27. {
  28. var data = JSON.parse(e.data);
  29. console.log(data);
  30. switch(data["type"]){
  31. // 服务端ping客户端
  32. case "ping":
  33. ws.send("{"type":"pong"}");
  34. break;
  35. // 登录 更新用户列表
  36. case "handshake":
  37. bindUid(data.client_id);
  38. $("#client_id").val(data.client_id);
  39. break;
  40. // 提醒
  41. case "reception":
  42. //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
  43. warn(data["content"], data["time"], data["timestamp"]);
  44. break;
  45. }
  46. }
  47. //绑定uid
  48. function bindUid (client_id) {
  49. var bindUrl = "{:url("push/push/BindUserClientId")}";
  50. $.post(bindUrl, {client_id: client_id}, function(data){
  51. console.log(data);
  52. }, "json");
  53. }
  54. //发送连接
  55. function sendLink () {
  56. sendTrigger("link");
  57. }
  58. // 发送信息
  59. function sendMessage (){
  60. sendTrigger("message");
  61. }
  62. function sendTrigger(sendType) {
  63. var toMid = $("#toMid").val();
  64. var pid = $("#pid").val();
  65. var message = $("footer .send_content").val();
  66. var client_id = $("#client_id").val();
  67. var sendUrl = "{:url("push/push/SendMessageToMerchant")}";
  68. $.ajax({
  69. url:sendUrl,
  70. type:"POST",
  71. data:{message:message,toMid:toMid,pid:pid,client_id:client_id,sendType:sendType},
  72. async:false,
  73. dataType:"JSON",
  74. success:function(data){
  75. data = JSON.parse(data);
  76. if (data.status < 0) {
  77. alert("发送失败,请稍后再试!");
  78. } else {
  79. $("#send_timestamp").val(data.timeStamp);
  80. $("#send_timestr").val(data.timeStr);
  81. if (sendType == "link") {
  82. $("#main").append(data.html);
  83. }
  84. }
  85. }
  86. })
  87. }
  88. // 提醒
  89. function warn(content, time, prevTmestamp){
  90. var V_image = $("#V_image").val();
  91. var str = "
    " + timestampWarn(prevTmestamp, time) + "
    "
  92. // $("#main").append(str);
  93. // }
  94. var t = 0;
  95. var i = 0, length = images.localId.length;
  96. images.serverId = [];
  97. /* upload 方法 -------- start */
  98. function upload()
  99. {
  100. wx.uploadImage(
  101. {
  102. localId: images.localId[i],
  103. success: function (res)
  104. {
  105. i++;
  106. images.serverId.push(res.serverId);
  107. if (i < length) { upload(); }
  108. var str = "
  109.                         
  110.                            "
  111. $("#main").append(str);
  112. if(i >= length ) uploadImageToDb(images.serverId);
  113. },
  114. fail: function (res){ }
  115. });
  116. }
  117. /* upload 方法 -------- end */
  118. upload();
  119. }
  120. })
  121. });
  122. function uploadImageToDb(images){
  123. var str = "";
  124. var upUrl = "http://xxxxxx.com/push/push/uploadImgage";
  125. var toMid = $("#toMid").val();
  126. var client_id = $("#client_id").val();
  127. $.post(upUrl,{images:images,toMid:toMid,client_id:client_id},function(data){
  128. if(data == 1){
  129. for(var n = 0 ; n < $(".chat-sender").length ; n++){
  130. str = $(".chat-sender").eq(n).attr("serverId")+",";
  131. for(var z=0;z上传失败
"); } } } } }) } /* 退款选择图片 -------- end */

后台部分

</>复制代码

  1. //微信上传图片
  2. public function uploadImgageAction () {
  3. if (!Request::instance()->isPost()) { notFund(); }
  4. $images = $_POST["images"];
  5. if (empty($images)) die;
  6. $toMid = input("post.toMid", "" , "string");
  7. $client_id = input("post.client_id", "", "string");
  8. if (strlen($client_id) != 20 ) { //客户端错误
  9. return json_encode(["status" => -1]);
  10. }
  11. if (!is_not_empty_string($toMid)) { //系统错误
  12. return json_encode(["status" => -2]);
  13. }
  14. require_once dirname(dirname(__FILE__)) . "/Events.php";
  15. $accIsOnline = Gateway::isUidOnline($toMid) == 1 ? 1 : 0; //判读商家是否在线
  16. $message_type = 3;
  17. //微信上传图片处理Start
  18. $res = json_decode(file_get_contents("access_token.json"));
  19. foreach ($res as $key => $value) {
  20. if($key == "access_token"){
  21. $access_token = $value;
  22. }
  23. }
  24. $data = [];
  25. foreach ($images as $k => $v) {
  26. $str = date("YmdHis").rand(1000,9999).".jpg";
  27. $targetName = "./upload/chat/".$str;
  28. if (!file_exists("./upload/chat/")) {
  29. mkdir("./upload/chat/", 0777, true);
  30. }
  31. $ch = curl_init("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$v);
  32. $fp = fopen($targetName, "wb");
  33. curl_setopt($ch, CURLOPT_FILE, $fp);
  34. curl_setopt($ch, CURLOPT_HEADER, 0);
  35. $msg["status"] = curl_exec($ch);
  36. $msg["filename"] = $str;
  37. curl_close($ch);
  38. fclose($fp);
  39. $data[] = $targetName;
  40. }
  41. //微信上传图片处理End
  42. if (!is_not_empty_array($data)) { //微信服务器端图片上传错误
  43. return json_encode(["status" => -2]);
  44. }
  45. $message = json_encode($data);
  46. //Log入库
  47. $insertId = PmodelPush::addChatLog(self::$uid, $toMid, $message, $message_type, 1, $accIsOnline);
  48. if ($insertId === false) { //入库失败(服务器故障)
  49. return json_encode(["status" => -3]);
  50. }
  51. $Worker = new Events;
  52. $message_json = "{"type":"send","source":"U_" . self::$uid . "","toClientUid":"" . $toMid . "","content":" . $message .",
  53.                "c_type": " . $message_type .", "Db_id":" . $insertId . "}";
  54. $Worker::onMessage($client_id, $message_json);
  55. //成功返回相关数据
  56. return json_encode([
  57. "status" => 1,
  58. "timeStamp" => time(),
  59. "timeStr" => date("H:i:s")
  60. ]);
  61. }

其他一些不是很重要的代码就不拿出来了。

当前项目只是一个简单的需求,并没有把GatewayWorker很多强大的功能体现出来,大家以后在项目开发中遇到更为复杂的需求,参考官方手册提供的一些Demo就可以慢慢实现并开发出更为健壮的项目!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113052.html

相关文章

  • 使用Websocket框架GatewayWorker开发电商平台买家卖家实时通讯

    摘要:我们的平台上有虚拟商品和实体商品两大分类,当时也考虑到了消息的读取状态。商家发送时间是否已读。看前端代码当前的所有代码并不是最终的,目前只是阶段性开发,后期在项目中逐步完善。 前段时间公司提了一个新的需求,在商品的详情页要实现站内买家和商品卖家实时通讯的功能以方便沟通促成交易,要开发此功能当时首先考虑到的就是swoole和workerman了,从网上大概了解了一下关于这两款工具的阐述,...

    ZweiZhao 评论0 收藏0
  • 使用Websocket框架GatewayWorker开发电商平台买家卖家实时通讯

    摘要:我们的平台上有虚拟商品和实体商品两大分类,当时也考虑到了消息的读取状态。商家发送时间是否已读。看前端代码当前的所有代码并不是最终的,目前只是阶段性开发,后期在项目中逐步完善。 前段时间公司提了一个新的需求,在商品的详情页要实现站内买家和商品卖家实时通讯的功能以方便沟通促成交易,要开发此功能当时首先考虑到的就是swoole和workerman了,从网上大概了解了一下关于这两款工具的阐述,...

    CloudDeveloper 评论0 收藏0
  • 使用Websocket框架GatewayWorker开发电商平台买家卖家实时通讯

    摘要:我们的平台上有虚拟商品和实体商品两大分类,当时也考虑到了消息的读取状态。商家发送时间是否已读。看前端代码当前的所有代码并不是最终的,目前只是阶段性开发,后期在项目中逐步完善。 前段时间公司提了一个新的需求,在商品的详情页要实现站内买家和商品卖家实时通讯的功能以方便沟通促成交易,要开发此功能当时首先考虑到的就是swoole和workerman了,从网上大概了解了一下关于这两款工具的阐述,...

    姘存按 评论0 收藏0
  • 通过GatewayWorker/Workerman搭建Websocket微服务

    摘要:背景最近在一些项目需要用到实时推送给分组的用户,前端需要传输给后端的信息比较少,通过多方考虑选择了通过框架基于搭建微服务。拥有定时器异步客户端异步异步异步异步消息队列等众多高性能组件。配合的定时器,也可以定时推送数据。 背景 最近在一些项目需要用到Websocket实时推送给分组的用户,前端需要传输给后端的信息比较少,通过多方考虑选择了通过GatewayWorker框架(基于Worke...

    QLQ 评论0 收藏0
  • PHP即时通讯设计实现

    摘要:即时通讯中,最重要的是响应速度,我们需要展示消息列表那么这时会有未读消息,未读数量,最后一条消息内容,时间等等。目前设计是单表单库。这里只是对即时通讯设计上做了一些简要的阐述,如有疑问和建议,请在评论区回复。 详解即时通讯设计实现(PHP+GatewayWorker+Redis) 需要实现的功能 一对一聊天(私聊) 一对多聊天(群聊) 类似QQ,微信等聊天列表 实时消息 显示 工具...

    asoren 评论0 收藏0

发表评论

0条评论

Baoyuan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<