IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> 使用websocket连接rabbitmqtt搭建IM聊天 -> 正文阅读

[网络协议]使用websocket连接rabbitmqtt搭建IM聊天

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript" src="Scripts/browserMqtt.min.js"></script>
    <script type="text/javascript" src="Scripts/mqfactory.js"></script>
    <style type="text/css">
        .leftfriend { width: 20%; float: left; border: 1px solid #808080 }
            .leftfriend .selected { padding: 10px; background-color: rgb(222 134 134 / 0.29) }
        .chatzone { width: 20%; float: left; border: 1px solid #808080 }
            .chatzone .chatlist { border: 1px solid #808080; height: 300px; overflow-y: scroll; }
    </style>
</head>
<body>


    <div>
        <h1>设置</h1>
        <lable>Host: </lable><input id="txtHost" placeholder="192.168.1.249" value="192.168.1.249" />
        <lable>Port: </lable><input id="txtPort" placeholder="15675" value="15675" />
        <label>UserName: </label><input id="txtUserName" placeholder="username" value="bc2332r" />
        <label>Password: </label><input id="txtPassword" placeholder="password" value="bc2332dsd0" />
        <label>Protocol: </label><input id="txtProtocol" placeholder="ws" value="ws" />
        <span class="constatus ">离线</span>
        <input id="btnConnect" type="button" value="连接" />
    </div>
    <div>
        <div class="leftfriend">
            <ul>
                <li data="mrli1" class="selected">mrli1</li>
                <li data="mrli2">mrli2</li>
                <li data="mrli3">mrli3</li>
            </ul>
        </div>
        <div class="chatzone">
            <div class="chatlist">
                <ul id="lstLog"><li></li></ul>
            </div>
            <div class="chatsend">
                <p><input type="text" value="" id="txtmsg" /></p>
                <p><input type="button" value="发送" onclick="Chat.Send()" /></p>
            </div>
        </div>
    </div>


</body>
</html>

脚本段


    <script type="text/javascript">

        var mqclient;
        var mqttOpts = {};
        //var routingKey = 'Dcon.Logs.ServerWebShow';
        var message;
        var Chat = {
            Init: function () {
                Chat.Register();
            },
            Register: function () {
                //选中聊天列表
                $(".leftfriend li").on("click", function () {
                    var routekey = Chat.GetSelectedKey();
                    mqclient.once('onsus', Chat.mqUnsubscribeSuccess);
                    mqclient.sus(Chat.GetSelectedKey());

                    $(".leftfriend .selected").removeClass("selected");
                    $(this).addClass("selected");

                    //订阅成功后,仅注册一次事件(要考虑每次注册事件时,事件处理器调用的次数,如果仅用一次,就用once方法)
                    //routingKey = $("#btnRoutingKey").val();
                    mqclient.once('onss', Chat.mqSubscribeSuccess);
                    //简单订阅
                    mqclient.ss(Chat.GetSelectedKey());
                });

                //连接mqtt
                $('#btnConnect').click(function () {
                    mqttOpts = {
                        host: (() => $('#txtHost').val())(),
                        port: (() => $('#txtPort').val())(),
                        username: (() => $('#txtUserName').val())(),
                        password: (() => $('#txtPassword').val())(),
                        //transformWsUrl方法用于在浏览器中使用MQTT的场景,默认情况下,MQTT自动生成的url为ws://ip:port形式,
                        //然而服务器要求的格式是ws://ip:port/ws,所以MQTT提供了此接口用于在生成url时自定义url格式
                        transformWsUrl: (url, opts, client) => { return opts.protocol && opts.protocol == 'ws' ? url + 'ws' : url; },
                        // Math.random().toString(16).substr(2, 8)
                        clientId: (() => { return 'littyclinet'; })()
                    };
                    var biz = {
                        huanjing: function (handler, isOn) {
                            if (isOn !== false) {
                                this.ss(this.topics.huanjing, handler);
                            } else {
                                this.sus(this.topics.huanjing, handler);
                            }
                        },
                        topics: {
                            huanjing: '/hyj/huanjing/monitor'
                        }
                    };
                    //系统初始化时注入连接选项
                    mqfactory.inject(mqttOpts, biz);
                    //创建mqclient单例
                    mqclient = mqfactory.create();
                    //注册mqclient的连接成功事件
                    mqclient.on('connect', Chat.MQConnected);
                });
            },
            MQConnected: function (res) {
                $(".constatus").text("在线");
            },
            ///获取选中的订阅key
            GetSelectedKey: function () {
                return $(".leftfriend .selected").attr("data");
            },
            Send: function () {
                var msg = $("#txtmsg").val();
                var fm = Chat.FormartSendMsg(msg);
                var queue = $(".leftfriend .selected").attr("data");
                //发送消息
                mqclient.pub(queue, fm);
                //  $('#lstLog').append('<li>我: ' + msg + '</li>');
            },
            //订阅成功
            mqSubscribeSuccess: function (res) {

                mqclient.on(Chat.GetSelectedKey(), Chat.onMessageArrived);
                $('#lstLog').append('<li>Subscribe successful.' + Chat.GetSelectedKey() + '</li>');
            },
            //取消订阅
            mqUnsubscribeSuccess: function () {
                mqclient.off(Chat.GetSelectedKey(), Chat.onMessageArrived);

                $('#lstLog').append('<li>取消队列</li>');
            },
            //接受到消息处理
            onMessageArrived: function (message) {
                try {
                    var json = JSON.parse(message.toString());


                    $('#lstLog').append('<li>' + json.from + ': ' + json.msg + '</li>');

                    $('#lstLog li').last().focus();
                } catch (e) {
                    console.log(e);
                }
            },
            FormartSendMsg: function (msg) {
                var t = { from: mqttOpts.clientId, msg: msg.toString(), to: Chat.GetSelectedKey() };
                return JSON.stringify(t);
            },


        }


        $(function () {
            Chat.Init();



        });
    </script>
.net rabbitmq
 /// <summary>
        /// 发送到队列
        /// </summary>
        /// <param name="message"></param>
        /// <param name="queue"></param>
        public void PublishMqtt(string message, string queue)
        {
            using (var connection = mc.CreateConnection())
            {
                using (var channel = connection.CreateModel())
                {
                    bool durable = true;
                    Dictionary<String, Object> args = new Dictionary<String, Object>();
                    args.Add("x-max-length-bytes ", 1048576);
                    channel.QueueDeclare(queue, durable, false, false, args);
                    var properties = channel.CreateBasicProperties();
                    properties.SetPersistent(true);
                    var body = Encoding.UTF8.GetBytes(message);
                    //交换器、队列、绑定
                    channel.BasicPublish("amq.topic", queue, properties, body);
                    // 这样就可以做到点对点通信了,amq.topic是默认exchange
               //     channel.BasicPublish("amq.topic", sessionId, null, messageBodyBytes);
                    System.Console.WriteLine(" set {0}", message);
                }
            }
        }

?

?demo下载地址:demo

  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2021-07-04 20:05:15  更:2021-07-04 20:05:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 7:48:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码