devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp之微信小程序开发教程及如何合理使用WebSocket（实时监听）+workman聊天系统+linux系统配置阿里云端口_uniapp小程序 使用websocket

作者：你好赵伟 | 2024-02-26 22:47:29

赞

踩

uniapp小程序 使用websocket

添加链接描述
添加链接描述

thinphp6.1---workerman文档
[添加链接描述](https://www.kancloud.cn/manual/thinkphp6_0/1147857)
workerman手册：https://www.workerman.net/doc/workerman/faq/client-connect-fail.html

  • 1
  • 2
  • 3

在阿里云配置好端口（linux启动端口）

在这里插入图片描述

如果不关闭防火墙的话，也可以在防火墙规则中添加端口。如果端口被占用就先杀死进程。

添加端口80：firewall-cmd --zone=public --add-port=80/tcp --permanent
更新防火墙规则： firewall-cmd --reload
重启服务：systemctl restart firewalld.service
查看所有打开的端口： firewall-cmd --zone=public --list-ports

WebSocket服务一旦开启就会有进程，失败也有进程，所以必须先杀死进程，否则之前设置的端口就被占用了。
查询某个端口是否被占用：lsof -i :9501 如果有进程存在说明被占用
————————————————
版权声明：本文为CSDN博主「Jason Ho」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42433970/article/details/100653124

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

uniapp长连接

			// 判断是否已连接
					checkOpenSocket () {
								let self = this;
								uni.sendSocketMessage({
									data: 'ping',//需要发送的内容
									 success: (res) => {
										 console.log(res);
										return;
									},
									fail: (err) => { // 未连接打开websocket连接
										self.openConnection(); 
									}
								});
							   },
							openConnection() { // 打开连接
									uni.closeSocket(); // 确保已经关闭后再重新打开
									uni.connectSocket({
										// 【非常重要】必须确保你的服务器是成功的
										url: "ws://192.168.70.65:2000",
										success(data) {
											console.log(data);//链接成功提示
											console.log("websocket正在连接...");
										},
									});
								
								// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
									uni.onSocketOpen(function (res) {
										console.log(res);
										  console.log('WebSocket连接成功');
										});
									//连接成功后如果有服务器返回的消息 先接收
									this.onSocketMessage(2); 
								},
								
								//	打开成功监听服务器返回的消息
							onSocketMessage (type = 1) { // 消息
								   console.log(34534);
									this.timeout = 60000;
									this.timeoutObj = null;
							   uni.onSocketMessage((res) => {
										console.log(res)//服务器返回的消息
									let giveMsg = res.data;
									// 后台绑定client_id
									// 如果返回有数据 转换
									if (giveMsg) {
										let msg = JSON.parse(giveMsg);
											console.log("判断是否有数据"+giveMsg)
											console.log("触发心跳")
											this.reset(); 
									}
									// 如果没连接成功服务器并没有返回数据
									this.getSocketMsg(res.data); // 监听到有新服务器消息
								});
								},
							     // 监听到有新服务器消息 将数据弹出在聊天框中
									getSocketMsg (reData) { // 监听到服务器消息
										console.log('监听到服务器消息 reData=', reData);
										let info = JSON.parse(reData);
											console.log(info);
										console.log('app onMessage=', reData)
									},
								// 检测心跳reset
										reset () {
											clearInterval(this.timeoutObj);
											this.start(); // 启动心跳
										},
										
								// 启动心跳 start 
										start () {
											let self = this;
											this.timeoutObj = setInterval(function(){
												uni.sendSocketMessage({
													data: 'ping',
													 success: (res) => {
														console.log('连接中....成功');
														console.log(res);
													},
													fail: (err) => {
														console.log('连接失败重新连接....');
														self.openConnection();
													}
												});
											}, this.timeout);
										},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

前端访问

<html>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<input type="text" style="width: 500px" class="name"><input class="save" type="button" value="提交"></body>
</html>
<script>
    ws = new WebSocket("ws://121.40.176.39:2346");
    ws.onopen = function () {
        alert('连接成功！');
        $('.save').on('click', function () {
            let text = $('.name').val();
            var arr = '{"clentId":1,"text":' + text + ',"type":1}';
            ws.send(arr);
        })
    };
    ws.close = function () {
        alert('close..')
    }
    ws.onmessage = function (e) {
        alert('收到服务消息：')
        let value = e.data;
        $('.name').val(value);
    };
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

workman聊天系统

Linux命令行：composer require topthink/think-worker

  • 1
配置文件worker_server.php
<?php
return [
    'socket' => 'http://127.0.0.1:2346',
    'name' => 'thinkphp',
    'count' => 1,
    'worker_class' => 'app\webSocket\Worker', //类文件地址
    '工单'=>1,
];

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
worker文件夹：app\webSocket\Worker
<?php
/**
 * 工单处理
 */

namespace app\webSocket;

use think\worker\Server;
use think\facade\Db;
use app\webSocket\workOrder\Worker as orderWorker;


class Worker extends Server
{
    protected $socket = 'websocket://0.0.0.0:2346';

    /**
     * 当连接建立时触发的回调函数
     * @param $connection
     */
    public function onConnect($connection)
    {
        dump(23);
        //上传工单id
        //获取聊天记录
        $data = [];
        $data['code'] = 200;
        $data['msg'] = '链接成功';
        $connection->workOrderId = 0;
        $connection->userId = 0;
        $connection->send(json_encode($data));
    }

    /**
     * 收到信息
     * @param $connection
     * @param $data
     */
    public function onMessage($connection, $data)
    {
        $data = json_decode($data, true);
        $statusType = $data['statusType'] ?? 1;//1-代表代表是工单类型
        if ($statusType == 1) {
            if ($data['isHaed'] == 1) {
                //处理心跳
                return true;
            } else {
                if ($data['isSign'] == 1) {
                    //如果是注册，那么查询消息列表，并记录该链接；
                    //记录链接
                    $this->worker->workerOrder[$data['id']][$data['userId']] = $connection;
                    //查询消息列表
                    $res = (new orderWorker())->msg($data);
                    $connection->send(json_encode($res));
                } else {
                    //刷新数据
                   if ($data['imagesType'] == 9) {
                       $res = (new orderWorker())->msg($data);
                        $connection->send(json_encode($res));
                    } else {
                        //不是注册，那么消息写入数据库，并推送到其他终端
                        //消息写入数据库
                        $res = (new orderWorker())->insertMessage($data);
                        //推送到其他终端
                        if (isset($this->worker->workerOrder[$data['id']])) {
                            $arr = $this->worker->workerOrder[$data['id']];
                            foreach ($arr as $value) {
                                //如果是自己，那么跳过
                                $value->send(json_encode($res));
                            }
                        }
                }
                }
            }
        } else {
            $connection->send(json_encode(['code' => 400, 'message' => '该服务类型未定义！']));
        }
    }

    //用户断开链接app\webSocket\Worker
    public function onClose($connection)
    {
        $connection->send('关闭连接');
    }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87

在这里插入图片描述

linux(window->cmd)查看执行命令

php think worker:server-》显示服务内容
php think worker start-》开启服务
php think worker [start|stop|reload|restart|status]-其它命令
配置或查看阿里云端口是否开启
如果不关闭防火墙的话，也可以在防火墙规则中添加端口。如果端口被占用就先杀死进程。

添加端口80：firewall-cmd --zone=public --add-port=80/tcp --permanent
更新防火墙规则： firewall-cmd --reload
重启服务：systemctl restart firewalld.service
查看所有打开的端口： firewall-cmd --zone=public --list-ports

WebSocket服务一旦开启就会有进程，失败也有进程，所以必须先杀死进程，否则之前设置的端口就被占用了。
查询某个端口是否被占用：lsof -i :9501 如果有进程存在说明被占用
————————————————
版权声明：本文为CSDN博主「Jason Ho」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42433970/article/details/100653124

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/147893
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号