chartroom模拟聊天弹窗

先上效果图:
在这里插入图片描述
这是单向输入框,里面主要就是一个弹窗功能和发送消息功能
先上一段HTML结构代码(样式木有,自己写)
在这里插入图片描述
有了结构自然就是功能的实现。
在这里插入图片描述
这个就是弹窗的功能实现,通过控制css属性display的一个block和none来显示和隐藏。
然后就是“发送”功能的实现了。
var Words;
var TalkWords;
var TalkSub;
var xhr;
function InputPress() {
if (event.keyCode == 13) {
chatRoom();
}
}
function chatRoom(){
//定义空字符串
var str = “”;
if(TalkWords.value == “”){
// 消息为空时弹窗
alert(“消息不能为空”);
return;
}
str = ‘

’ + TalkWords.value +’
’ ;

    toChat2("10000000051", "inner", TalkWords.value , "wx", "", "oXFEUwvf_exNy6VLr9nGrxrvAPxQ");
    
    // 将之前的内容与要发的内容拼接好 提交
    Words.innerHTML = Words.innerHTML + str;
}

function toChat2(enterpriseID,platform, query, source,userStatus,username){
    var url = "http://10.0.30.15:8092/SmartServer/robot/chat"; 
    xhr.onreadystatechange = toPostProcess;
    xhr.open("post", url, true);  
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
    xhr.send(JSON.stringify({
        "enterpriseID": enterpriseID,
        "platform": platform,
        "query": query,
        "source": source,
        "userStatus": userStatus,
        "username": username 
    })); 
    // console.log("ok"); 
} 

function toPostProcess() {/*设置当获XHR对象获取到返回信息后执行以下代码*/ 
    if (xhr.readyState === 4) { 
        if (xhr.status === 200) {
            res = xhr.responseText;
            var obj = eval ("(" + res + ")");
            // console.log("res ok:" +res); 
            try {   
                var textReply = obj.result.content; 
                str = '<div class="atalk"><span>' + textReply +'</span></div>';   
                // 将之前的内容与要发的内容拼接好 提交
                Words.innerHTML = Words.innerHTML + str; 
                
                // 置空
                TalkWords.value = "";
                // 滑动到最底部
                Words.scrollTop = Words.scrollHeight;
            } catch (e) {
                return handleError(xhr, e);
            }  
        } else {
            // console.log("可能存在跨域问题,解决即可"); 
        }  
    } 
}		

function GetXmlHttpObject() {
    var xmlHttp=null; 
    try {
        // Firefox, Opera 8.0+, Safari
        // console.log("XMLHttpRequest"); 
         xmlHttp=new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            // console.log("Msxml2"); 
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // console.log("Microsoft"); 
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}


//is moblie
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";



window.onload = function(){  
    Words = document.getElementById("words"); 
    TalkWords = document.getElementById("talkwords");
    TalkSub = document.getElementById("talksub"); 
    xhr = new GetXmlHttpObject(); 
    TalkSub.onclick = function(){ 
        chatRoom();	
        TalkWords.value = "";
    }   
    //is mobile
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        // console.log("手机");  
        document.getElementById('talk_con_id').className = 'talk_con_mob';		
        document.getElementById('words').className = 'talk_show_mob';	
        document.getElementById('talk_input_id').className = 'talk_input_mob';	
        document.getElementById('talkwords').className = 'talk_word_mob';	
    } else {
        // console.log("电脑"); 
        document.getElementById('talk_con_id').className = 'talk_con';
        document.getElementById('words').className = 'talk_show';	
        document.getElementById('talk_input_id').className = 'talk_input';	
        document.getElementById('talkwords').className = 'talk_word';	
    }
}

这个就是用作练习的demo,没有后端的数据交互。
而且现在node.js里面有一个双向数据流的东西,可以实现相互聊天的功能,可是node.js我不会啊,蓝瘦香菇。在这里插入图片描述

展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值