用Websocket聊天完整demo，做笔记用，各位大佬多多指教

//企业端
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200806160850444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhMTU5NDE4NA==,size_16,color_FFFFFF,t_70#pic_center)<html><head><title>直聊</title><meta http-equiv="Content-Type" content="text/html;  charset=gb2312" /><meta name="author" content="https://blog.csdn.net/q475254344"><link href="../css/chat.css" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"><script src="../js/jquery.min.js"></script><script src="../js/core.ajaxpanel.js"></script>//图片上传插件js文件<script src="../js/commonURL.js" type="text/javascript" charset="gb2312"></script> //动态拼接域名<script src="../js/jform.js"></script>//wuyong</head><style>#ajaxForm {height: 55px;}#images_text {max-width: 75px;left: 0;top: 0;right: 0;bottom: 0;margin: auto;max-height: 150px;padding-left: 10px;}.overlay {display: block;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index: 9998;-moz-opacity: 0.8;opacity: 1;filter: alpha(opacity=20);}.overlay_none {display: none;}.max_imgs {max-width: 800px;max-height: 800px;position: fixed;left: 25%;top: 5%;}.linkman {padding: 0 5px 0 7px;}
</style><body class="box"><div class="overlay_none" id="overlay" onclick="imgageNone()"><input type="text" class="identification" value="1" style="display: none;" /><img class="max_imgs" src="http://api.qyxdrc.com/storage/chatimg/qNQA8rGikHXhPIKKwBBIpVyhhyGLkruebzH0McLi.jpeg"alt=""></div><div class="container"><div class="chatbox"><div class="chatleft"><div class="top"><!-- <i class="fas fa-bars" style="font-size: 1.4em"></i> --><!-- <input type="text" placeholder="search" style="width: 140px; height: 36px; margin-left: 25px;"> --><!-- <button class="searchbtn"></style><i class="fas fa-search"></i></button> --><div style="font-size: 14px;display: flex;align-items: center;"><image style="width: 20px;height: 20px;"src="https://api.qyxdrc.com/storage/mini_img/tubiaos/zaixian.png" mode="aspectFill" /> <spanclass="linkman">0</span>个联系人</div></div><div class="center_in"><ul class="center_ul"></ul></div></div><div class="chatright"><div class="top infolist"><img style="border-radius: 20px; vertical-align: middle;width: 40px;height: 40px;" class="logo_img"src=""><span style="margin-left: 20px;" class="logo_text"></span><i class="fas fa-ellipsis-v"style="font-size: 1.4em; position: absolute; right: 20px; color: gray;cursor: pointer;"onclick="showHide()"></i><input type="text" id="showHide" value="1" style="display: none;"></div><div class="position_josv"><span> 沟通职位 </span> <span class="name_in"> 未填 </span> <span style="padding: 0 2px;"class="money_num">未知 </span> <span class="region"></span></div><div class="center"><ul class="msgleft_ul"><!-- 聊天记录 --></ul></div><div class="top_info"><div class="function_list"><a href="javascript:void(0)" title="常用语"><img src="../images/chang.png" alt=""class="function_img" id="function_img" onclick="setLongTerm()"></a><a href="javascript:void(0)" title="交换手机号"><img src="../images/phone.png" alt=""class="function_img" onclick="getPhone()"></a><a href="javascript:void(0)" title="交换微信号"><img src="../images/wechat.png" alt=""class="function_img" onclick="getWeChat()"></a><a href="javascript:void(0)" title="面试邀请"><img src="../images/mianshi.png" alt=""class="function_img" id="btn"></a><a href="javascript:void(0)" title="创建多人视频面试房间"><img src="../images/remote.png" alt=""class="function_img" id="video" onclick="manyVideo()"></a><a href="javascript:void(0)" title="AI面试"><img src="../images/aivideo.png" alt=""class="function_img" id="video" onclick="aIVideoS()"></a><a href="javascript:void(0)" title="短信通知"><img src="../images/duanxin.png" alt=""class="function_img" onclick="setBote()"></a><form id="ajaxForm" method="post" enctype="multipart/form-data"><label for="file" class="cursor-pointer" style="height: 80px;"><img class="function_img" title="发送图片" style="cursor: pointer;"src="../images/tupian.png"></label><input type="file" id="file" name="chatimg" class="dn" style="display: none;" /></form><a href="javascript:void(0)" title="更换职位"><img src="../images/zhiweijiaohuan.png" alt=""class="function_img" onclick="updateInformation()"></a><a href="javascript:void(0)" title="发送office"><img src="../images/offer1.png" alt=""class="function_img" onclick="officeMation()"></a></div><input type="text" class="biaoshi" value="1" style="display: none;" /><div class="long_term" id="hide"></div></div><div class="footer"><textarea id="textarea_messge" maxlength="800" rows="5" cols="40"style="width: 100%; resize: none; border: none;height:75%; padding-left: 15px;padding-right: -20px;"placeholder="请在此输入要发送的内容..." onfocus="textareaFocus()"></textarea><button onclick="myFunction()" class="sendbtn">发送</button></div></div><div class="chatrihtml"><div class="logo_imagers"><img class="logo_img"src="http://api.qyxdrc.com/storage/avatar/vBV8wCaxIyFcJN9mwABBAyjHH2cZnYgoaAXWhltC.jpeg"style="width: 60px;height: 60px;border-radius: 50%;"><span class="companyname">无</span></div><div class="hiring"><span class="expectation">招聘岗位:</span><span class="jobs_name">无</span></div><div class="welfare_conditions"></div><div class="responsibility"><span class="responsibility_title">岗位职责:</span><text class="responsibility_text" class="" selectable="false" space="false" decode="false">无</text></div><div class="communication_date"><span class="responsibility_date" style="padding-right: 15px;">04月29日 10:24</span><span>由你发起了沟通</span></div></div></div></div><div id="choiceWindow"><label id="x" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label><div class="innerbodywrapper" style="margin-bottom: 10px"><b style="line-height: 40px; font-size: 18px;">发送面试邀请</b><div class="form-item"><div id="tag" class="form-tab-wrap"><div class="text_interview"><i>*</i><span>面试职位: </span><div class="select"><select id="position" onchange="positionData()"><option value="">请选择</option></select></div></div><div class="text_interview"><i>*</i><span>面试时间: </span><input type="datetime-local" id="jobtoptime" /></div><div class="text_interview"><i>*</i><span>面试地点: </span><input type="text" id="site" /></div><div class="text_interview"><i>*</i><span>联系人: </span><input type="text" id="linkman" /></div><div class="text_interview"><i>*</i><span>联系电话: </span><input type="text" id="telephone_in" /></div></div></div></div><div class="form-item tc" style="text-align: center;"><input type="submit" name="" value="发送" onclick="subSave()" class="form-submit-primary" /></div></div><div id="informationWindow"><div style="position: relative;height: 100%;"><image id="shut" src="./../images/sss.png"style="width: 20px;height: 20px;position: absolute;top:10px;left: 95%;font-size: 25px;" /><div class="innerbodywrapper" style="margin-bottom: 10px"><b style="line-height: 40px; font-size: 18px;">更换职位</b><div class="form-item"><div class="information"></div></div></div><div class="form-item tc" style="text-align: center;padding-top: 30px;"><input type="submit" name="" value="更改" onclick="informationSave(this)" class="form-submit-primary" /></div></div></div><div id="officeWindow"><!-- <label id="of" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label> --><image id="of" src="./../images/sss.png"style="width: 20px;height: 20px;position: absolute;top:10px;left: 95%;font-size: 25px;" /><div class="innerbodywrapper" style="margin-bottom: 10px"><b style="line-height: 40px; font-size: 18px;">发送office邀请</b><div class="form-item"><div id="tag" class="form-tab-wrap"><div class="text_interview"><span>入职职位: </span><input type="text" id="induction_jobsOffice" disabled /><input type="text" id="induction_id" style="display: none;"></div><div class="text_interview"><span>入职时间: </span><input type="datetime-local" id="induction_jobtoptime" /></div><div class="text_interview"><span>入职地点: </span><input type="text" id="induction_site" disabled /></div><div class="text_interview"><span>联系人: </span><input type="text" id="induction_linkman" disabled /></div><div class="text_interview"><span>联系电话: </span><input type="text" id="induction_telephone_in" disabled /></div></div></div></div><div class="form-item tc" style="text-align: center;"><input type="submit" name="" value="发送" onclick="sending()" class="form-submit-primary" /></div></div><div id="particulars"><image id="ofin" src="./../images/sss.png"style="width: 20px;height: 20px;position: absolute;top:10px;left: 95%;font-size: 25px;" /><div class="innerbodywrapper" style="margin-bottom: 10px"><b style="line-height: 40px; font-size: 18px;">发送offer邀请</b><div class="form-item"><div style="width: 100%;display: flex;justify-content: center;"><div class="particulars_box"><div class="particulars_img"><image style="width: 100px;height: 100px;border-radius: 50%;margin-bottom: 20px;"class="particulars_logo" src="../images/20200612144226.jpg" /><span class="particulars_logo_name">清远兄弟人才科技公司</span></div><div class="particulars_text"><div style="font-size: 14px;"><span>尊敬的</span><span class="particulars_name">xxx</span></div><div class="particulars_pc"><text class="" selectable="false" space="false" decode="false">非常荣幸地通知您,您已被我司正式录用,任<span class="particulars_josb">xxxx</span> 一职。真诚欢迎您的加入,祝您在我司工作愉快! 入职地点: <spanclass="particulars_address" style="color: #62d5c8;padding: 0 10px;"></span></text></div><div class="particulars_company"><span class="company_name">清远兄弟人才科技公司</span><span class="the_time">2020.06.11</span></div></div></div></div></div></div></div>
</body><script>var idvar fromuidvar websocketvar resume_idvar arrvar dataLIstvar phoneIndexvar wxIndexvar token_type = localStorage.getItem("token_type");var access_token = localStorage.getItem("access_token");$(function () {//get传输function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return decodeURI(r[2]);return null;}fromuid = localStorage.getItem("uid")utype = localStorage.getItem("utype")//console.log(fromuid);id = getUrlParam('id');resume_id = getUrlParam('resume_uid');//console.log(resume_id);websocket = new WebSocket("后台接口");//长链接接口，有新消息会自动获取if (utype == 2) {alert('当前身份是个人身份，请切换企业身份')window.opener = null;window.open('', '_self');window.close();}//连接关闭的回调方法websocket.onopen = function () {sendSocketMessage('登陆', 'login')}// //连接关闭的回调方法// websocket.onclose = function () {//     setMessageInnerHTML("WebSocket连接关闭");// }setMessageInnerHTML()//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () {closeWebSocket();}//关闭WebSocket连接function closeWebSocket() {websocket.close();}liebiao()getData()Chatlist()positionList()AccesswxNumber()if (dataLIst.length != 0) {$(".center").animate({ scrollTop: $(".msgleft_ul li:last").offset().top }, 1000);}if (token_type == 'Bearer') {} else {alert('请先登陆')window.opener = null;window.open('', '_self');window.close();}// }if (fromuid == id) {alert('请不要和自己聊天')window.opener = null;window.open('', '_self');window.close();}if (dataLIst.length != 0) {//console.log("聊过了")} else {setTimeout(function () {text_in()}, 1000)}AccessPhone()})$("textarea").each(function (index) {$("textarea")[index].addEventListener('keydown', function (e) {if (e.keyCode != 13) {return;} else {//当按键输入为回车时，执行下列操作myFunction()event.preventDefault();//为了兼容IE8e.returnValue = false;e = $(this).val() + '\n';//手动增加换行符$(this).val(e).focus();//定义焦点还是在这个控件上}});});//常用语function setLongTerm() {var val = $('.biaoshi').val()if (val == 1) {$('.long_term').attr('id', 'show')$('.biaoshi').val('2')$(".long_term").empty();$('#function_img').attr('src', '../images/lchang.png')arr = ['很高兴收到您的应聘消息，可以聊聊吗？','我可以看看您的简历吗？','您之前是否有与我们这个职位相关的工作经验呢？','可以说说您的期望薪资吗？您很符合我们的要求','我们公司目前正在快速发展，前景非常不错']for (const key in arr) {html = ''html += '<span οnclick="setTerm(' + key + ')">' + arr[key] + '</span><br/>'$('.long_term').append(html)}} else if (val == 2) {$('#function_img').attr('src', '../images/chang.png')$('.long_term').attr('id', 'hide')$('.biaoshi').val('1')}}//文本获取焦点function textareaFocus() {$('#function_img').attr('src', '../images/chang.png')$('.long_term').attr('id', 'hide')$('.biaoshi').val('1')}//聊天记录人群function Chatlist() {$(".center_ul").empty();$.ajax({url: href + "/api/menews/list",type: "GET",dataType: "json",async: false,contentType: "application/json;charset=utf-8",headers: {"Content-Type": "application/json;charset=utf8",authorization: token_type + " " + access_token,},data: {},success: function (data) {//console.log(data);$('.linkman').text(data.list.length)for (var i in data.list) {var classLsi = ''if (id == data.list[i].touid || id == data.list[i].fromuid) {classLsi = 'colorList'}var html = ''html += '<li class="' + classLsi + '" οnclick="fun(this,' + data.list[i].touid + ',' + data.list[i].resume_id + ',' + data.list[i].fromuid + ')">'html += '<img style="border-radius: 25px; vertical-align: middle;width:50px;height:50px;flex-shrink:0" src="' + data.list[i].avatars + '">'html += '<div id="text_box">'html += '<div id="text_center">'html += '<span style="margin-left: 10px;width: 70px;">' + data.list[i].fullname + '</span>'html += '<span style="margin-left: 10px;">' + data.list[i].desc + '</span>'html += '</div>'if (data.list[i].type == 'ms') {html += '<span style="margin-left: 10px;" class="text_information">面试邀请</span>'} else if (data.list[i].type == 'text') {html += '<span style="margin-left: 10px;" class="text_information">' + data.list[i].message + '</span>'} else if (data.list[i].type == 'images') {html += '<span style="margin-left: 10px;" class="text_information">图片</span>'} else if (data.list[i].type == 'other') {html += '<span style="margin-left: 10px;" class="text_information">' + data.list[i].message + '</span>'}html += '</div>'html += '</li>'$('.center_ul').append(html)}}})};//右侧信息var avatars = ''var myavatars = ''var other_mobilevar other_weixinvar mobileInvar jobs_ids//正则数据为null时显示未填function pdnull(items) {items != null ? items = items : items = "请更换职位"items != "[object?Null]" ? items = items : items = "请更换职位"//console.log(items);return items;}function liebiao() {$.ajax({url: href + "/api/menews/chat?fromuid=" + id,type: "GET",dataType: "json",async: false,contentType: "application/json;charset=utf-8",headers: {"Content-Type": "application/json;charset=utf8",authorization: token_type + " " + access_token,},data: {},success: function (data) {//console.log(data.info);//console.log(data);other_mobile = data.info.mobileavatars = data.info.avatarsother_weixin = data.info.weixinmyavatars = data.info.myavatarsjobs_ids = data.info.jobs_idmobileIn = data.info.mobile$('.logo_img').attr('src', pdnull(data.info.avatars))$('#linkman').val(data.contact)$('#induction_linkman').val(data.contact)$('#induction_site').val(data.address)$('#telephone_in').val(data.mobile)$('#induction_telephone_in').val(data.mobile)$('.logo_text').text(data.info.username)$('.responsibility_text').text(data.info.specialty)$('.responsibility_date').text(data.info.date)$('.companyname').text(data.info.username)$('.responsibility_title').text('个人优点')$('.expectation').text('期望工作：')$('.jobs_name').text(data.info.intention_jobs)$('#induction_jobsOffice').val(data.info.jobs_name)$('#induction_id').val(data.info.jobs_id)$('.money_num').text(data.info.wage_cn)$('.name_in').text(pdnull(data.info.jobs_name))$('.region').text(data.info.district_cn)let tag_cn = data.info.tag_cnfor (var i in tag_cn) {var html = ''html += '<span>' + tag_cn[i] + '</span>'$('.welfare_conditions').append(html)}}})}//聊天记录function getData() {$.ajax({url: href + "/api/menews/chat/log?fromuid=" + fromuid + '&touid=' + id,type: "GET",dataType: "json",async: false,contentType: "application/json;charset=utf-8",headers: {"Content-Type": "application/json;charset=utf8",authorization: token_type + " " + access_token,},data: {},success: function (data) {//console.log(data);$('.msgleft_ul').empty()dataLIst = datavar scrollHeight = $('.center').prop("scrollHeight");for (var i in data) {var html = ''if (data[i].fromuid == fromuid) {//console.log("shang");html += '<li class="msgright">'if (data[i].mutually == 3) {html += '<text class="has_not">已读</text>'} else {html += '<text class="has_not">未读</text>'}if (data[i].type == 'ms') {html += '<p class="msgcard" οnclick="InvitationList(' + i + ')">' + '[面试邀请]' + '</p>'} else if (data[i].type == 'text') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'mobile') {html += '<p class="msgcard"  id="msgcard">' + data[i].message + '<span class="mobile_ok"  οnclick="mobileOk()">同意</span>' + '</p>'} else if (data[i].type == 'mobileto') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'other') {html += '<p class="msgcard">对方的电话是' + data[i].message + '</p>'} else if (data[i].type == 'other_wx') {html += '<p class="msgcard">对方的微信是' + data[i].message + '</p>'} else if (data[i].type == 'wx') {html += '<p class="msgcard"  id="msgcard">' + data[i].message + '<span class="WeChat_ok"  οnclick="WeChatOk()">同意</span>' + '</p>'} else if (data[i].type == 'wxin') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'images') {html += '<img class="images_text' + i + '" id="images_text" src="' + data[i].message + '" alt="" οnclick="idtext(' + i + ',' + 2 + ')"/>'} else if (data[i].type == 'msresult') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'other_map') {html += '<p class="msgcard">[定位请在小程序查看]</p>'} else if (data[i].type == 'of') {html += '<p class="msgcard"  οnclick="getPosition(' + data[i].message + ')">[入职邀请]</p>'} else if (data[i].type == 'cancel') {html += '<p class="msgcard"  style="font-size:12px">已撤回</p>'}html += '<img style="border-radius: 20px; vertical-align: top;" class="myLogo" src="' + myavatars + '">'html += '</li>'$('.msgleft_ul').append(html)} else {if (data[i].type == 'other' || data[i].type == 'other_wx') {} else {html += '<li class="msgleft">'html += '<img style="border-radius: 20px; vertical-align: top;" class="opposite_side" src="' + avatars + '">'if (data[i].type == 'ms') {html += '<p class="msgcard" οnclick="InvitationList(' + i + ')">' + '[面试邀请]' + '</p>'} else if (data[i].type == 'text') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'mobile') {html += '<p class="msgcard" id="msgcard">' + data[i].message + '<span class="mobile_ok" οnclick="mobileOk()">同意</span>' + '</p>'} else if (data[i].type == 'mobileto') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'other') {html += '<p class="msgcard">对方的电话是' + data[i].message + '</p>'} else if (data[i].type == 'other_wx') {html += '<p class="msgcard">对方的微信是' + data[i].message + '</p>'} else if (data[i].type == 'wx') {html += '<p class="msgcard"  id="msgcard">' + data[i].message + '<span class="WeChat_ok"  οnclick="WeChatOk()">同意</span>' + '</p>'} else if (data[i].type == 'wxin') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'images') {html += '<img class="images_text' + i + '" id="images_text" src="' + data[i].message + '" alt=""  οnclick="idtext(' + i + ',' + 2 + ')"/>'} else if (data[i].type == 'msresult') {html += '<p class="msgcard">' + data[i].message + '</p>'} else if (data[i].type == 'other_map') {html += '<p class="msgcard">[定位请在小程序查看]</p>'} else if (data[i].type == 'of') {html += '<p class="msgcard" οnclick="getPosition(' + data[i].message + ')">[入职邀请]</p>'} else if (data[i].type == 'cancel') {html += '<p class="msgcard"  style="font-size:12px">已撤回</p>'}if (data[i].mutually == 3) {html += '<text class="has_not">已读</text>'} else {html += '<text class="has_not">未读</text>'}html += '</li>'}$('.msgleft_ul').append(html)}}//console.log(avatars, myavatars);$('.opposite_side').attr('src', avatars)$('.myLogo').attr('src', myavatars)}})}function idtext(index, name) {let val = $('.identification').val()if (name == '1') {//console.log();if (val == 1) {$('.max_imgs').attr('src', arr[index].message)$('#overlay').removeClass('overlay_none')$('#overlay').addClass('overlay')$('.identification').val(2)// }else{//     $('.max_imgs').attr('src', src)}} else {if (val == 1) {$('.max_imgs').attr('src', dataLIst[index].message)$('#overlay').removeClass('overlay_none')$('#overlay').addClass('overlay')$('.identification').val(2)// }else{//     $('.max_imgs').attr('src', src)}}}function imgageNone() {let val = $('.identification').val()if (val == 2) {$('.max_imgs').attr('src', '')$('#overlay').removeClass('overlay')$('#overlay').addClass('overlay_none')$('.identification').val(1)}}//发送面试邀请$('#btn').click(function () {$("#choiceWindow").slideDown(300);$("#backGround").show();})function updateInformation() {positionChange()if(msgjoglist.length == 0){return}//    if(leng == undefined){//     return//    }$("#informationWindow").slideDown(300);$("#backGround").show();}function officeMation() {positionChange()if(msgjoglist.length == 0){return}$("#officeWindow").slideDown(300);$("#backGround").show();}$("#x").click(function () {$("#choiceWindow").slideUp(300);$("#backGround").hide();})$("#of").click(function () {$("#officeWindow").slideUp(300);$("#backGround").hide();})$("#ofin").click(function () {$("#particulars").slideUp(300);$("#backGround").hide();})$("#shut").click(function () {$("#informationWindow").slideUp(300);$("#backGround").hide();})//将消息显示在网页上var arr = []function setMessageInnerHTML() {//console.log("123123");//接收到消息的回调方法websocket.onmessage = function (event) {console.log(event);if (JSON.parse(event.data).type == 'login') {return false;}arr = []arr.push(JSON.parse(event.data))//console.log(arr);// $.each(arr,function(key,value){//      //console.log("姓名："+key+";"+"对应值："+arr[key]);//  })for (var i in arr) {var html = ''if (arr[i].fromuid == fromuid) {html += '<li class="msgright">'if (arr[i].mutually == 3) {html += '<text class="has_not">已读</text>'} else {html += '<text class="has_not">未读</text>'}if (arr[i].type == 'ms') {html += '<p class="msgcard" οnclick="InvitationList(' + i + ')">' + '[面试邀请]' + '</p>'} else if (arr[i].type == 'text') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'mobile') {html += '<p class="msgcard"  id="msgcard">' + arr[i].message + '<span class="mobile_ok"  οnclick="mobileOk()">同意</span>' + '</p>'} else if (arr[i].type == 'mobileto') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'other') {if (arr[i].fromuid == fromuid) {html += '<p class="msgcard">对方的电话是' + arr[i].message + '</p>'}} else if (arr[i].type == 'other_wx') {html += '<p class="msgcard">对方的微信是' + arr[i].message + '</p>'} else if (arr[i].type == 'wx') {html += '<p class="msgcard"  id="msgcard">' + arr[i].message + '<span class="WeChat_ok"  οnclick="WeChatOk()">同意</span>' + '</p>'} else if (arr[i].type == 'wxin') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'images') {html += '<img class="images_text' + i + '" id="images_text" src="' + arr[i].message + '" alt="" οnclick="idtext(' + i + ',' + 1 + ')"/>'} else if (arr[i].type == 'msresult') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'other_map') {html += '<p class="msgcard">[定位请在小程序查看]</p>'} else if (arr[i].type == 'of') {html += '<p class="msgcard" οnclick="getPosition(' + arr[i].message + ')">[入职邀请]</p>'} else if (arr[i].type == 'cancel') {html += '<p class="msgcard" style="font-size:12px">已撤回</p>'}html += '<img style="border-radius: 20px; vertical-align: top;" class="myLogo" src="' + myavatars + '">'html += '</li>'} else {if (arr[i].type == 'other' || arr[i].type == 'other_wx') {} else {html += '<li class="msgleft">'html += '<img style="border-radius: 20px; vertical-align: top;" class="opposite_side" src="' + avatars + '">'if (arr[i].type == 'ms') {html += '<p class="msgcard" οnclick="InvitationList(' + i + ')">' + '[面试邀请]' + '</p>'} else if (arr[i].type == 'text') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'mobile') {html += '<p class="msgcard"  id="msgcard">' + arr[i].message + '<span class="mobile_ok"  οnclick="mobileOk()">同意</span>' + '</p>'} else if (arr[i].type == 'mobileto') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'other') {if (arr[i].fromuid == fromuid) {html += '<p class="msgcard">对方的电话是' + arr[i].message + '</p>'}} else if (arr[i].type == 'other_wx') {html += '<p class="msgcard">对方的微信是' + arr[i].message + '</p>'} else if (arr[i].type == 'wx') {html += '<p class="msgcard"  id="msgcard">' + arr[i].message + '<span class="WeChat_ok"  οnclick="WeChatOk()">同意</span>' + '</p>'} else if (arr[i].type == 'wxin') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'images') {html += '<img class="images_text' + i + '" id="images_text" src="' + arr[i].message + '" alt=""  οnclick="idtext(' + i + ',' + 2 + ')"/>'} else if (arr[i].type == 'msresult') {html += '<p class="msgcard">' + arr[i].message + '</p>'} else if (arr[i].type == 'other_map') {html += '<p class="msgcard">[定位请在小程序查看]</p>'} else if (arr[i].type == 'of') {html += '<p class="msgcard" οnclick="getPosition(' + arr[i].message + ')">[入职邀请]</p>'} else if (arr[i].type == 'cancel') {html += '<p class="msgcard" style="font-size:12px">已撤回</p>'}if (arr[i].mutually == 3) {html += '<text class="has_not">已读</text>'} else {html += '<text class="has_not">未读</text>'}html += '</li>'}}}$('.msgleft_ul').append(html)var texss = $(".center")[0].scrollHeight$(".center").animate({ scrollTop: texss }, 'slow');// $(".center").animate({ scrollTop: $(".msgleft_ul li:last").offset().top }, 1000);$('#textarea_messge').val('')}}$('textarea').bind("focus", function () {$('.long_term').attr('id', 'hide')$('.biaoshi').val('1')})//点击发送function myFunction() {var texss = $(".center")[0].scrollHeight//console.log(texss);var val = $('#textarea_messge').val()if (!val || val == '  ') {alert("发送信息不能为空")return false}sendSocketMessage(val, 'text')Chatlist()$(".center").animate({ scrollTop: texss }, 'slow');}//发送参参数进行交互function sendSocketMessage(message, type) {var message_in = {'fromuid': fromuid,"touid": id,"message": message,"type": type,"utype": utype};//console.log(message_in);message_info = JSON.stringify(message_in);websocket.send(message_info);setMessageInnerHTML()}//常用语点击function setTerm(text) {//console.log(arr[text]);$('#textarea_messge').val(arr[text])$('.long_term').attr('id', 'hide')$('.biaoshi').val('1')$('#function_img').attr('src', '../images/chang.png')}function fun(e, ids, resume, fromuidIn) {//console.log(resume);var idFormif (ids == fromuid) {idForm = fromuidIn} else if (fromuidIn == fromuid) {idForm = ids}resume_id = resume$('.center_ul li').removeClass('colorList');$(e).addClass("colorList");location.href = 'chat.html?id=' + idForm + '&resume_uid=' + resume}//面试职位列表var option_valfunction positionData() {option_val = $("#position option:selected").val()}//获取职位列表function positionList() {$.ajax({url: href + "/api/company/jobs_list?type=1",type: "GET",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {var listDar = JSON.parse(data).listfor (const key in listDar) {var html = ''html += '<option value="' + listDar[key].id + '">' + listDar[key].jobs_name + '</option>'$('#position').append(html)}}})}//获取更改职位列表var msgjoglist=''function positionChange() {$.ajax({url: href + "/api/menews/msgjoglist",type: "GET",dataType: "json",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {$('.information').empty()msgjoglist=dataif(data.length == 0){alert('暂无职位选择，请检查您是否有发布职位或职位还在审核中')return}for (const key in data) {var html = ''html += '<a class="column_info" href="javascript:void(0)">'html += '<div class="jobs_box">'html += '<div class="jobs_box_right">'html += '<div class="nav_josb">'html += '<span>' + data[key].jobs_name + '</span>'html += '</div>'html += '<div>'html += '<text class="contentstext" selectable="false" space="false" decode="false">' + data[key].contents + '</text>'html += '</div>'html += '</div>'html += '<div>'html += '<label for="jobs_idin">'html += '<input type="checkbox" id="jobs_idin" value="' + data[key].id + '" name="information" οnclick="userCheck(this)">'html += '</label>'html += '</div>'html += '</div>'html += '</a>'$('.information').append(html)}}})}//发送面试邀请function subSave() {//console.log("123");var dateVal = $('#jobtoptime').val();var site = $('#site').val();var linkman = $('#linkman').val();var telephone_in = $('#telephone_in').val();//console.log(!site);if (!dateVal || !site || !telephone_in || !linkman || !option_val) {alert('请填写完整面试邀请信息')return false}//职位地点数据var info = {'time': dateVal,'address': site,'telephone': telephone_in,'contact': linkman,'jobs_id': option_val,'resume_uid': id}$.ajax({url: href + "/api/company/jobs/invite",type: "POST",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: info,success: function (data) {//console.log(JSON.parse(data))sendSocketMessage('did=' + JSON.parse(data).id, 'ms')alert("面试邀请成功")$("#choiceWindow").slideUp(300);$("#backGround").hide();}, error: function (XMLHttpRequest, textstatus, errorThrown) {//console.log(XMLHttpRequest.status);//console.log(XMLHttpRequest.readystate);//console.log(textstatus);if (textstatus == 'error') {alert("邀请失败，请尝试重新发送或联系客服")}//console.log(errorThrown);}})}//面试邀请function InvitationList(index) {//console.log("面试邀请");if (utype == 2) {location.href = "/user/invite.html"} else {location.href = '/business/resumeInvite.html'}}//自动发送打招呼function text_in() {arr = ['很高兴收到您的应聘消息，可以聊聊吗？','我可以看看您的简历吗？','您之前是否有与我们这个职位相关的工作经验呢？','可以说说您的期望薪资吗？您很符合我们的要求','我们公司目前正在快速发展，前景非常不错']var index = Math.floor((Math.random() * arr.length));//console.log(arr[index]);sendSocketMessage(arr[index], 'text')Chatlist()}//获取电话是否交换过function AccessPhone() {$.ajax({url: href + "/api/menews/getmobile?fromuid=" + fromuid + '&touid=' + id + '&type=mobile',type: "GET",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {//console.log(data);phoneIndex = data}})}//获取微信是否交换过function AccesswxNumber() {$.ajax({url: href + "/api/menews/getmobile?fromuid=" + fromuid + '&touid=' + id + '&type=wx',type: "GET",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {//console.log(data);wxIndex = data}})}$('.sendbtn').keydown(function () {//console.log('123');})//交换电话按钮图标function getPhone() {var texss = $(".center")[0].scrollHeightif (phoneIndex == 1 || phoneIndex == 0) {sendSocketMessage('是否同意交换电话', 'mobile')} else if (phoneIndex == 2) {sendSocketMessage(other_mobile, 'other')setMessageInnerHTML()}$(".center").animate({ scrollTop: texss }, 'slow');}//确定交换function mobileOk() {if (phoneIndex == 2) {alert("对方已同意交换电话，不需要重复确认")return false}$.ajax({url: href + "/api/menews/agreemobile?fromuid=" + fromuid + '&touid=' + id + '&agree=2&utype=' + utype + '&type=mobile',type: "GET",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {let dataInfo = JSON.parse(data)//console.log(dataInfo);if (dataInfo.state == 1) {sendSocketMessage(dataInfo.cphone, 'mobileto')AccessPhone()}}})}//确定交换微信function WeChatOk() {$.ajax({url: href + "/api/menews/agreemobile?fromuid=" + fromuid + '&touid=' + id + '&agree=2&utype=' + utype + '&type=wx',type: "GET",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {var texss = $(".center")[0].scrollHeightlet dataInfo = JSON.parse(data)//console.log(dataInfo.wx != null);if (dataInfo.state == 1) {if (dataInfo.wx == null || dataInfo.wx == '') {alert('请先填写企业微信')} else {sendSocketMessage(dataInfo.wx, 'wxin')}}$(".center").animate({ scrollTop: texss }, 'slow');}})}function getWeChat() {//console.log(wxIndex);var texss = $(".center")[0].scrollHeightif (wxIndex == 1 || wxIndex == 0) {sendSocketMessage('是否交换您的微信号?', 'wx')} else if (wxIndex == 2) {if (!!other_weixin) {sendSocketMessage(other_weixin, 'other_wx')setMessageInnerHTML()} else {alert('暂时未填写微信')}}$(".center").animate({ scrollTop: texss }, 'slow');}//图片上传var option = {url: href + "/api/menews/chat/chatimg",type: 'POST',dataType: 'text',async: false,contentType: "charset=utf-8",headers: {authorization: token_type + " " + access_token,},success: function (data) {//console.log(data)// $("#logo").attr("src",'/storage/company_logo/'+data)// $("#logourl").val(data)sendSocketMessage(data, 'images')var texss = $(".center")[0].scrollHeight$(".center").animate({ scrollTop: texss }, 'slow');},error: function (data) {//console.log('error');}};//图片上传$('#file').on('change', function () {$('#ajaxForm').ajaxSubmit(option);})//短信发送function setBote() {$.ajax({url: href + "/api/menews/chat/smsmsg",type: "POST",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: { mobile: mobileIn },success: function (data) {if (JSON.parse(data).status == 1) {alert(JSON.parse(data).msg)} else {alert(JSON.parse(data).msg)}}})}//屏蔽浏览器右键菜单document.oncontextmenu = function () {return false;}// $('.msgcard').mousedow(function (e) {//     var key = e.which; //获取鼠标键位//     //console.log("key");// })//隐藏右侧栏信息function showHide() {let showHide = $('#showHide').val()console.log("123");if (showHide == 1) {$('.chatrihtml').hide()$('#showHide').val(2)} else {$('.chatrihtml').show()$('#showHide').val(1)}}//创建视频创建function manyVideo() {var b = confirm("即将跳转到职位列表创建视频房间，邀请该求职者进入视频房间，是否继续？")//按确认和取消输出不同的内容if (b == true) {location.href = '/business/position.html'//                f();} else {alert('取消操作')}}//ai面试function aIVideoS() {$.ajax({url: href + "/api/Aiinterview/addAiInterview?uid=" + id + '&jobs_id=' + jobs_ids + '&type=ai',type: "GET",dataType: "json",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {sendSocketMessage(data.qrcode_url, 'images')},error: function () {alert('发送失败，请检查您发布的该职位状态是否是在招聘中，如有疑问请联系客服')}})}function userCheck(event) {console.log(event);$("input[name='information']:checkbox").prop('checked', false);$(event).prop('checked', true);}function informationSave() {let jobs_ids = $("input[name='information']:checked").val()$.ajax({url: href + "/api/menews/msgjogtj?fromuid=" + id + '&jobs_id=' + jobs_ids,type: "GET",dataType: "json",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {console.log(data);sendSocketMessage('Boss更换了与您沟通的职位', 'text')liebiao()$("#informationWindow").slideUp(300);$("#backGround").hide();},error: function () {alert('发送失败，请检查您发布的该职位状态是否是在招聘中，如有疑问请联系客服')}})}function sending() {let dateVal = $('#induction_jobtoptime').val();let induction_id = $('#induction_id').val()let induction_site = $('#induction_site').val()let induction_linkman = $('#induction_linkman').val()let induction_telephone_in = $('#induction_telephone_in').val()if (!dateVal) {alert('请填写完整面试邀请信息')return false}let info = {'time': dateVal,'address': induction_site,'telephone': induction_telephone_in,'contact': induction_linkman,'jobs_id': induction_id,'touid': id}$.ajax({url: href + "/api/menews/sendoffer",type: "POST",dataType: "text",async: false,headers: {authorization: token_type + " " + access_token},data: info,success: function (data) {console.log(JSON.parse(data))// sendSocketMessage('did=' + res.data.id, 'of')if (JSON.parse(data).status == 1) {sendSocketMessage(JSON.parse(data).id, 'of')alert("面试邀请成功")$("#officeWindow").slideUp(300);$("#backGround").hide();} else if (JSON.parse(data).status == 0) {alert(JSON.parse(data).msg)$("#officeWindow").slideUp(300);$("#backGround").hide();}// alert("面试邀请成功")// $("#choiceWindow").slideUp(300);// $("#backGround").hide();}, error: function (XMLHttpRequest, textstatus, errorThrown) {//console.log(XMLHttpRequest.status);//console.log(XMLHttpRequest.readystate);//console.log(textstatus);if (textstatus == 'error') {alert("邀请失败，请尝试重新发送或联系客服")}//console.log(errorThrown);}})}function getPosition(e) {console.log(e);$.ajax({url: href + "/api/menews/offerinfo?id=" + e,type: "get",dataType: "json",async: false,headers: {authorization: token_type + " " + access_token},data: {},success: function (data) {console.log(data);$('.particulars_logo').attr('src', data.avatars)$('.particulars_logo_name').text(data.company_name)$('.particulars_name').text(data.resume_name)$('.particulars_josb').text(data.jobs_name)$('.particulars_address').text(data.address)$('.the_time').text(data.addtime)}})$("#particulars").slideDown(300);$("#backGround").show();}
</script></html>

body {padding: 0px;margin: 0px;
}li {list-style: none;
}input {border-radius: 5px;
}.leftbar ul {padding: 0px;
}.leftbar li {padding: 10px;
}.leftbar {background-color: #212e3e;width: 50px;height: 100%;color: grey;padding: 0px;text-align: center;position: absolute;
}.container {height: 100%;width: 100%;/* background: linear-gradient(#1f94bf 20%, #edf5f8 0, #edf5f8 80%, #1f94bf 0); *//* background: linear-gradient(#E6EDF5 20%, #E6EDF5 0, #E6EDF5 80%, #E6EDF5 0); */background: url("../images/background1.jpg");display: flex;margin: 0;
}.infolist {position: relative;
}.chatbox {margin: auto;height: 80%;width: 80%;transform: translateY(-10%);/* box-shadow: 0 0 0 1px gray; *//* box-shadow: 10px 10px 10px 10px #1f94bf, -10px 10px 10px 10px rgba(255,255,255,0.5); */display: flex;padding-top: 5%;
}.chatleft {padding-bottom: 39px;background-color: #ffffff;width: 25%;left: 0;height: 100%;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
}.chatrihtml {padding-bottom: 39px;background-color: #ffffff;width: 20%;left: 0;height: 100%;border-left: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;border-bottom-right-radius: 10px;border-top-right-radius: 10px;justify-content: center;
}.chatleft .top {height: 9%;color: grey;background-color: #f7f9f9;display: flex;align-items: center;padding-left: 20px;border-top-left-radius: 10px;
}.searchbtn {height: 36px;width: 36px;border-radius: 18px;background-color: #1f94bf;color: #ecf0f1;margin-left: 10px;
}.searchbtn:hover {cursor: pointer;
}.chatleft .center {overflow-y: scroll;height: 90%;
}.chatleft .center ul {padding-left: 0px;
}.chatleft .center li {padding: 15px;
}.chatright {background-color: #ffffff;width: 75%;height: 100%;
}.chatright .top {height: 10%;display: flex;align-items: center;padding-left: 30px;
}
.position_josv{height: 5%;padding: 10px 0 10px 30px;display: flex;
background-color: #fafafa;align-items: center;font-size: 15px;color: #61687c;
}
.name_in{color: #50c2c3;padding: 0 5px;
}
.region{padding: 0 5px;
}
.money_num{padding: 0 5px;font-size: 13px;
}
.top_in {height: 10%;display: flex;align-items: center;justify-content: space-between;/* padding-left: 30px; */border-top: 1px solid #aaa;
}.top_info {height: 5%;display: flex;align-items: center;/* justify-content: space-between; *//* padding-left: 30px; */border-top: 1px solid #aaa;position: relative;
}.chatright .center {background-color: #fff;height: 57%;overflow-y: scroll;overflow-x: hidden;
}.chatright .center ul {padding: 10px;
}.chatright .center li {padding: 10px;width: 80%;
}.chatright .center p {display: inline-block;
}.msgcard {display: inline-block;margin: 0 10px 0 10px;background-color: white;border-radius: 5px;padding: 10px;max-width: 80%;word-wrap: break-word;background-color: #62d5c8;color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
}.msgleft {float: left;
}#msgcard {position: relative;margin: 0 0px 25px 0;
}.mobile_ok {width: 148px;height: 31px;color: #fff;position: absolute;top: 40px;left: 0px;background-color: #12ada9;display: flex;align-items: center;justify-content: center;
}.WeChat_ok {width: 172px;height: 31px;color: #fff;position: absolute;top: 40px;left: 0px;background-color: #12ada9;display: flex;align-items: center;justify-content: center;
}.msgright {float: right;text-align: right;
}.msgright {}.chatright .footer {height: 190px;background-color: #fbfcfc;text-align: right;position: relative;
}.sendbtn {height: 33px;width: 68px;border-radius: 10px;background-color: #fff;color: #2887d5;font-weight: bold;/* margin: 3px 20px 0 0; */position: absolute;bottom: 6px;right: 25px;border: 1px solid #2887d5;
}.has_not {font-size: 12px;color: #aaa;
}ul {padding: 0px;margin: 0px;
}.phone_list {display: flex;flex-direction: column;/* align-items: center; */padding: 0 30px;
}.phone {width: 40px;height: 40px;
}#text_center {width: 100%;display: flex;/* flex-direction: column; *//* align-items: center; *//* justify-content: space-between; */font-size: 12px;
}#text_center > span:last-child {width: 160px;font-size: 11px;color: rgba(82, 78, 78, 0.733);text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}.text_box {height: 50px;width: 100%;display: flex;flex-direction: column;/* align-items: center; */justify-content: space-between;
}.text_information {width: 153px;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: rgba(41, 38, 38, 0.8);font-size: 12px;padding-top: 10px;
}.center_ul > li {display: flex;/* border-top: 1px solid #aaa; */padding: 20px;border-bottom: 1px solid rgb(241, 233, 233);
}.center_ul > li:first-child {/* display: flex; */border-top: 1px solid rgb(218, 215, 215);/* padding: 20px 0; *//* border-bottom: 1px solid rgb(202, 194, 194); */
}.logo_imagers {height: 100px;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.logo_imagers > span {font-size: 12px;color: #aaa;padding-top: 10px;
}.hiring {height: 50px;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 12px;padding: 20px 0;
}.hiring > span:last-child {font-size: 18px;padding-top: 10px;color: #62d5c8;font-weight: 600;
}
.companyname {font-size: 16px;color: #333333;
}
.expectation {font-size: 16px;color: #333333;
}.welfare_conditions {display: flex;justify-content: space-between;flex-wrap: wrap;padding-top: 20px;
}.colorList {background: rgba(235, 235, 235, 0.712);
}.welfare_conditions > span {display: inline-block;padding: 5px 10px;background-color: #12ada9;color: #fff;font-size: 12px;margin: 10px;
}.responsibility {display: flex;flex-direction: column;justify-items: center;align-items: center;padding-top: 38px;
}.responsibility > text {font-size: 12px;/* color: #aaa; */padding: 20px 10px;border-bottom: 1px solid #eee;color: #62d5c8;width: 200px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:10;-webkit-box-orient: vertical;
}.communication_date {display: flex;align-items: center;justify-content: flex-start;font-size: 12px;padding: 20px 0;color: #aaa;
}.function_img {width: 29px;height: 29px;/* margin: 5px; */
}
.function_img:first-child {margin-left: 23px;
}
.function_img:last-child {margin-left: 15px;
}.function_list {padding: 5px 0;width: 160px;display: flex;justify-content: space-between;align-items: center;
}.opposite_side {width: 30px;height: 30px;border-radius: 50%;
}.myLogo {width: 30px;height: 30px;border-radius: 50%;
}.center_in {height: 95%;overflow-y: scroll;overflow-x: hidden;
}
.center_in::-webkit-scrollbar {width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
}
.center_in::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(100, 96, 96, 0.2);background: rgba(107, 106, 106, 0.2);
}.center_in::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(110, 109, 109, 0.2);border-radius: 0;background: rgba(126, 125, 125, 0.1);
}
.center::-webkit-scrollbar {width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
}
.center::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(100, 96, 96, 0.2);background: rgba(107, 106, 106, 0.2);
}.center::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(110, 109, 109, 0.2);border-radius: 0;background: rgba(126, 125, 125, 0.1);
}
.long_term {position: absolute;bottom: 40px;left: 18px;width: 335px;height: 200px;border-radius: 20px;padding: 10px;background-color: #fff;border: 1px solid #ccc;overflow-y: scroll;overflow-x: hidden;
}.long_term > span {display: inline-block;width: 335px;padding: 10px 0;border-bottom: 1px solid #eee;border-top: 1px solid #eee;font-size: 13px;
}.long_term > span:nth-child(2) {border-top: none;
}#hide {display: none;
}#show {display: block;
}#choiceWindow {display: none;position: absolute;top: 25%;left: 25%;width: 40%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#particulars {display: none;position: absolute;top: 25%;left: 25%;width: 40%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#officeWindow {display: none;position: absolute;top: 25%;left: 25%;width: 40%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#informationWindow {display: none;position: absolute;top: 25%;left: 35%;width: 25%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#videointerview {display: none;position: absolute;top: 25%;left: 35%;width: 25%;height: 30%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}
input[type="checkbox"] {-webkit-appearance: none; /*清除复选框默认样式*/border: 1px solid #0378d8;vertical-align: middle;width: 18px;height: 18px;float: left;margin-top: 0;margin-right: 0 !important;border-radius: 0;
}
input[type="checkbox"]:checked {/* background-position: -48px 0; */background: #0378d8 url(../images/true2.png) ; /*复选框的背景图*/background-size: contain;
}#backGround_info {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 1100px;background-color: black;z-index: 1;-moz-opacity: 0.8;opacity: 0.8;filter: alpha(opacity=88);
}#x:hover {cursor: pointer;color: rgb(55, 198, 192);
}
#ofin:hover {cursor: pointer;color: rgb(55, 198, 192);
}
#shut:hover {cursor: pointer;color: rgb(55, 198, 192);
}
#of:hover {cursor: pointer;color: rgb(55, 198, 192);
}#xy:hover {cursor: pointer;color: rgb(55, 198, 192);
}.form-tab-wrap > label {margin: 80px;
}.uploadImgBtn {border: 1px solid #eee;width: 100px;height: 100px;cursor: pointer;position: relative;background: url("/storage/mini_img/tubiaos/jiahao.png") no-repeat;-webkit-background-size: cover;background-size: cover;
}.uploadImgBtn .uploadImg {position: absolute;right: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;
}.text_interview {display: flex;align-items: center;padding: 15px 0;
}input[type="text"] {box-sizing: border-box;height: 30px;border-radius: 4px;border: 1px solid #c8cccf;color: #6a6f77;-web-kit-appearance: none;-moz-appearance: none;display: block;outline: 0;padding: 0 10px;text-decoration: none;
}input[type="text"]:focus {border: 1px solid #ff7496;
}.text_interview > span {width: 90px;text-align-last: justify;
}.text_interview > input {margin-left: 15px;
}.text_interview > div {margin-left: 15px;
}.text_interview > div {margin-left: 15px;
}.form-submit-primary {height: 30px;line-height: 30px;padding: 0 11px;width: 200px;text-align: center;background: #02bafa;border: 1px #26bbdb solid;border-radius: 3px;color: #fff;display: inline-block;text-decoration: none;font-size: 12px;outline: none;
}.select {display: inline-block;width: 200px;position: relative;vertical-align: middle;padding: 0;overflow: hidden;background-color: #fff;color: #555;border: 1px solid #aaa;text-shadow: none;border-radius: 4px;transition: box-shadow 0.25s ease;z-index: 2;
}.select:hover {box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}.select:before {content: "";position: absolute;width: 0;height: 0;border: 10px solid transparent;border-top-color: #ccc;top: 10px;right: 6px;cursor: pointer;z-index: -2;
}.select select {cursor: pointer;padding: 5px;width: 100%;border: none;background: transparent;background-image: none;-webkit-appearance: none;-moz-appearance: none;
}.select select:focus {outline: none;
}.submit-primary {text-align: center;
}
.nav_josb {width: 100%;display: flex;align-items: center;padding-bottom: 20px;box-sizing: border-box;
}
.jobs_box {width: 100%;display: flex;align-items: center;padding: 10px 0;margin: 10px 0;background: #fbfbfb;
}
.jobs_box_right {width: 400px;padding-left: 10px;
}
.contentstext{width: 400px;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
font-size: 13px;
color: #333333 !important;
}
.nav_josb>span{/* padding-left: 20px; */font-size: 14px;
}
.column_info{text-decoration:none;color: #000000;
}
.particulars_box{width: 800px;height: 380px;background-color: #fbfbfb;padding: 10px;color: #333333;
}
.particulars_text{display: flex;justify-content: center;flex-direction: column;
}
.particulars_img{display: flex;flex-direction: column;justify-content: center;align-items: center;padding-bottom: 40px;
}
.particulars_company{display: flex;flex-direction: column;align-items: flex-end;font-size: 12px;color: #aaa;padding-top: 20px;
}
.particulars_name{padding: 0 10px;color: #62d5c8;
}
.particulars_josb{padding: 0 10px;color: #62d5c8;
}
.particulars_pc{padding: 20px 0 30px 0;font-size: 14px;
}
.company_name{padding-bottom: 10px;
}

body {padding: 0px;margin: 0px;
}li {list-style: none;
}input {border-radius: 5px;
}.leftbar ul {padding: 0px;
}.leftbar li {padding: 10px;
}.leftbar {background-color: #212e3e;width: 50px;height: 100%;color: grey;padding: 0px;text-align: center;position: absolute;
}.container {height: 100%;width: 100%;/* background: linear-gradient(#1f94bf 20%, #edf5f8 0, #edf5f8 80%, #1f94bf 0); *//* background: linear-gradient(#E6EDF5 20%, #E6EDF5 0, #E6EDF5 80%, #E6EDF5 0); */background: url("../images/background1.jpg");display: flex;margin: 0;
}.infolist {position: relative;
}.chatbox {margin: auto;height: 80%;width: 80%;transform: translateY(-10%);/* box-shadow: 0 0 0 1px gray; *//* box-shadow: 10px 10px 10px 10px #1f94bf, -10px 10px 10px 10px rgba(255,255,255,0.5); */display: flex;padding-top: 5%;
}.chatleft {padding-bottom: 39px;background-color: #ffffff;width: 25%;left: 0;height: 100%;border-bottom-left-radius: 10px;border-top-left-radius: 10px;
}.chatrihtml {padding-bottom: 39px;background-color: #ffffff;width: 20%;left: 0;height: 100%;border-left: 1px solid #ccc;display: flex;flex-direction: column;align-items: center;border-bottom-right-radius: 10px;border-top-right-radius: 10px;justify-content: center;
}.chatleft .top {height: 9%;color: grey;background-color: #f7f9f9;display: flex;align-items: center;padding-left: 20px;border-top-left-radius: 10px;
}.searchbtn {height: 36px;width: 36px;border-radius: 18px;background-color: #1f94bf;color: #ecf0f1;margin-left: 10px;
}.searchbtn:hover {cursor: pointer;
}.chatleft .center {overflow-y: scroll;height: 90%;
}.chatleft .center ul {padding-left: 0px;
}.chatleft .center li {padding: 15px;
}.chatright {background-color: #ffffff;width: 75%;height: 100%;
}.chatright .top {height: 10%;display: flex;align-items: center;padding-left: 30px;
}
.position_josv{height: 5%;padding: 10px 0 10px 30px;display: flex;
background-color: #fafafa;align-items: center;font-size: 15px;color: #61687c;
}
.name_in{color: #50c2c3;padding: 0 5px;
}
.region{padding: 0 5px;
}
.money_num{padding: 0 5px;font-size: 13px;
}
.top_in {height: 10%;display: flex;align-items: center;justify-content: space-between;/* padding-left: 30px; */border-top: 1px solid #aaa;
}.top_info {height: 5%;display: flex;align-items: center;/* justify-content: space-between; *//* padding-left: 30px; */border-top: 1px solid #aaa;position: relative;
}.chatright .center {background-color: #fff;height: 57%;overflow-y: scroll;overflow-x: hidden;
}.chatright .center ul {padding: 10px;
}.chatright .center li {padding: 10px;width: 80%;
}.chatright .center p {display: inline-block;
}.msgcard {display: inline-block;margin: 0 10px 0 10px;background-color: white;border-radius: 5px;padding: 10px;max-width: 80%;word-wrap: break-word;background-color: #62d5c8;color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;
}.msgleft {float: left;
}#msgcard {position: relative;margin: 0 0px 25px 0;
}.mobile_ok {width: 148px;height: 31px;color: #fff;position: absolute;top: 40px;left: 0px;background-color: #12ada9;display: flex;align-items: center;justify-content: center;
}.WeChat_ok {width: 172px;height: 31px;color: #fff;position: absolute;top: 40px;left: 0px;background-color: #12ada9;display: flex;align-items: center;justify-content: center;
}.msgright {float: right;text-align: right;
}.msgright {}.chatright .footer {height: 190px;background-color: #fbfcfc;text-align: right;position: relative;
}.sendbtn {height: 33px;width: 68px;border-radius: 10px;background-color: #fff;color: #2887d5;font-weight: bold;/* margin: 3px 20px 0 0; */position: absolute;bottom: 6px;right: 25px;border: 1px solid #2887d5;
}.has_not {font-size: 12px;color: #aaa;
}ul {padding: 0px;margin: 0px;
}.phone_list {display: flex;flex-direction: column;/* align-items: center; */padding: 0 30px;
}.phone {width: 40px;height: 40px;
}#text_center {width: 100%;display: flex;/* flex-direction: column; *//* align-items: center; *//* justify-content: space-between; */font-size: 12px;
}#text_center > span:last-child {width: 160px;font-size: 11px;color: rgba(82, 78, 78, 0.733);text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}.text_box {height: 50px;width: 100%;display: flex;flex-direction: column;/* align-items: center; */justify-content: space-between;
}.text_information {width: 153px;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;color: rgba(41, 38, 38, 0.8);font-size: 12px;padding-top: 10px;
}.center_ul > li {display: flex;/* border-top: 1px solid #aaa; */padding: 20px;border-bottom: 1px solid rgb(241, 233, 233);
}.center_ul > li:first-child {/* display: flex; */border-top: 1px solid rgb(218, 215, 215);/* padding: 20px 0; *//* border-bottom: 1px solid rgb(202, 194, 194); */
}.logo_imagers {height: 100px;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.logo_imagers > span {font-size: 12px;color: #aaa;padding-top: 10px;
}.hiring {height: 50px;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 12px;padding: 20px 0;
}.hiring > span:last-child {font-size: 18px;padding-top: 10px;color: #62d5c8;font-weight: 600;
}
.companyname {font-size: 16px;color: #333333;
}
.expectation {font-size: 16px;color: #333333;
}.welfare_conditions {display: flex;justify-content: space-between;flex-wrap: wrap;padding-top: 20px;
}.colorList {background: rgba(235, 235, 235, 0.712);
}.welfare_conditions > span {display: inline-block;padding: 5px 10px;background-color: #12ada9;color: #fff;font-size: 12px;margin: 10px;
}.responsibility {display: flex;flex-direction: column;justify-items: center;align-items: center;padding-top: 38px;
}.responsibility > text {font-size: 12px;/* color: #aaa; */padding: 20px 10px;border-bottom: 1px solid #eee;color: #62d5c8;width: 200px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:10;-webkit-box-orient: vertical;
}.communication_date {display: flex;align-items: center;justify-content: flex-start;font-size: 12px;padding: 20px 0;color: #aaa;
}.function_img {width: 29px;height: 29px;/* margin: 5px; */
}
.function_img:first-child {margin-left: 23px;
}
.function_img:last-child {margin-left: 15px;
}.function_list {padding: 5px 0;width: 160px;display: flex;justify-content: space-between;align-items: center;
}.opposite_side {width: 30px;height: 30px;border-radius: 50%;
}.myLogo {width: 30px;height: 30px;border-radius: 50%;
}.center_in {height: 95%;overflow-y: scroll;overflow-x: hidden;
}
.center_in::-webkit-scrollbar {width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
}
.center_in::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(100, 96, 96, 0.2);background: rgba(107, 106, 106, 0.2);
}.center_in::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(110, 109, 109, 0.2);border-radius: 0;background: rgba(126, 125, 125, 0.1);
}
.center::-webkit-scrollbar {width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
}
.center::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(100, 96, 96, 0.2);background: rgba(107, 106, 106, 0.2);
}.center::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(110, 109, 109, 0.2);border-radius: 0;background: rgba(126, 125, 125, 0.1);
}
.long_term {position: absolute;bottom: 40px;left: 18px;width: 335px;height: 200px;border-radius: 20px;padding: 10px;background-color: #fff;border: 1px solid #ccc;overflow-y: scroll;overflow-x: hidden;
}.long_term > span {display: inline-block;width: 335px;padding: 10px 0;border-bottom: 1px solid #eee;border-top: 1px solid #eee;font-size: 13px;
}.long_term > span:nth-child(2) {border-top: none;
}#hide {display: none;
}#show {display: block;
}#choiceWindow {display: none;position: absolute;top: 25%;left: 25%;width: 40%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#particulars {display: none;position: absolute;top: 25%;left: 25%;width: 40%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#officeWindow {display: none;position: absolute;top: 25%;left: 25%;width: 40%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#informationWindow {display: none;position: absolute;top: 25%;left: 35%;width: 25%;height: 50%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}#videointerview {display: none;position: absolute;top: 25%;left: 35%;width: 25%;height: 30%;padding: 20px;border: 3px solid #ccc;background-color: white;z-index: 2;overflow: auto;
}
input[type="checkbox"] {-webkit-appearance: none; /*清除复选框默认样式*/border: 1px solid #0378d8;vertical-align: middle;width: 18px;height: 18px;float: left;margin-top: 0;margin-right: 0 !important;border-radius: 0;
}
input[type="checkbox"]:checked {/* background-position: -48px 0; */background: #0378d8 url(../images/true2.png) ; /*复选框的背景图*/background-size: contain;
}#backGround_info {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 1100px;background-color: black;z-index: 1;-moz-opacity: 0.8;opacity: 0.8;filter: alpha(opacity=88);
}#x:hover {cursor: pointer;color: rgb(55, 198, 192);
}
#ofin:hover {cursor: pointer;color: rgb(55, 198, 192);
}
#shut:hover {cursor: pointer;color: rgb(55, 198, 192);
}
#of:hover {cursor: pointer;color: rgb(55, 198, 192);
}#xy:hover {cursor: pointer;color: rgb(55, 198, 192);
}.form-tab-wrap > label {margin: 80px;
}.uploadImgBtn {border: 1px solid #eee;width: 100px;height: 100px;cursor: pointer;position: relative;background: url("/storage/mini_img/tubiaos/jiahao.png") no-repeat;-webkit-background-size: cover;background-size: cover;
}.uploadImgBtn .uploadImg {position: absolute;right: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer;
}.text_interview {display: flex;align-items: center;padding: 15px 0;
}input[type="text"] {box-sizing: border-box;height: 30px;border-radius: 4px;border: 1px solid #c8cccf;color: #6a6f77;-web-kit-appearance: none;-moz-appearance: none;display: block;outline: 0;padding: 0 10px;text-decoration: none;
}input[type="text"]:focus {border: 1px solid #ff7496;
}.text_interview > span {width: 90px;text-align-last: justify;
}.text_interview > input {margin-left: 15px;
}.text_interview > div {margin-left: 15px;
}.text_interview > div {margin-left: 15px;
}.form-submit-primary {height: 30px;line-height: 30px;padding: 0 11px;width: 200px;text-align: center;background: #02bafa;border: 1px #26bbdb solid;border-radius: 3px;color: #fff;display: inline-block;text-decoration: none;font-size: 12px;outline: none;
}.select {display: inline-block;width: 200px;position: relative;vertical-align: middle;padding: 0;overflow: hidden;background-color: #fff;color: #555;border: 1px solid #aaa;text-shadow: none;border-radius: 4px;transition: box-shadow 0.25s ease;z-index: 2;
}.select:hover {box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}.select:before {content: "";position: absolute;width: 0;height: 0;border: 10px solid transparent;border-top-color: #ccc;top: 10px;right: 6px;cursor: pointer;z-index: -2;
}.select select {cursor: pointer;padding: 5px;width: 100%;border: none;background: transparent;background-image: none;-webkit-appearance: none;-moz-appearance: none;
}.select select:focus {outline: none;
}.submit-primary {text-align: center;
}
.nav_josb {width: 100%;display: flex;align-items: center;padding-bottom: 20px;box-sizing: border-box;
}
.jobs_box {width: 100%;display: flex;align-items: center;padding: 10px 0;margin: 10px 0;background: #fbfbfb;
}
.jobs_box_right {width: 400px;padding-left: 10px;
}
.contentstext{width: 400px;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
font-size: 13px;
color: #333333 !important;
}
.nav_josb>span{/* padding-left: 20px; */font-size: 14px;
}
.column_info{text-decoration:none;color: #000000;
}
.particulars_box{width: 800px;height: 380px;background-color: #fbfbfb;padding: 10px;color: #333333;
}
.particulars_text{display: flex;justify-content: center;flex-direction: column;
}
.particulars_img{display: flex;flex-direction: column;justify-content: center;align-items: center;padding-bottom: 40px;
}
.particulars_company{display: flex;flex-direction: column;align-items: flex-end;font-size: 12px;color: #aaa;padding-top: 20px;
}
.particulars_name{padding: 0 10px;color: #62d5c8;
}
.particulars_josb{padding: 0 10px;color: #62d5c8;
}
.particulars_pc{padding: 20px 0 30px 0;font-size: 14px;
}
.company_name{padding-bottom: 10px;
}

用Websocket聊天完整demo，做笔记用，各位大佬多多指教相关推荐

swoole+redis(websocket聊天室demo)
websocket是不同于http的另外一种网络通信协议,能够进行双向通信,基于此,可开发出各种实时通信产品,我简单做了个聊天室demo,顺便分享一下. PHP的swoole扩展,正如作者所说,是PH ...
golang websocket 聊天室demo
近期偶然的机会看到一些go的websocket技术方案,顺便写了个demo,玩了一下: 首先安装websocket包 go get code.google.com/p/go.net/websocket ...
Netty实现WebSocket聊天室Demo【一对一聊天,群聊,emoji表情,文件上传】
Git源码:学不会算我输,私信骂我.源码地址:https://gitee.com/ytrlmy/netty-chat/tree/master/src/main 微信交流:413007703,这段时间我 ...
【杂谈】想成为机器学习学霸？先学会做笔记吧
今天聊聊记笔记这件事儿,在学习的过程中做好总结记录是非常重要的. 作者 | 小满&有三编辑 | 小满&有三 <人类简史>有一个有趣的现象描写:远古时期的智人是看什么就吃什 ...
java控制层创建websocket_用Java构建一个简单的WebSocket聊天室
前言首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...
印象笔记mac版同步问题_【杂谈】想成为机器学习学霸？先学会做笔记吧(Evernote,BoostNote,Leanote等)...
今天聊聊记笔记这件事儿,在学习的过程中做好总结记录是非常重要的. 作者 | 小满&有三编辑 | 小满&有三 <人类简史>有一个有趣的现象描写:远古时期的智人是看什么就吃什 ...
【杂谈】想成为机器学习学霸？先学会做笔记吧(Evernote,BoostNote,Leanote等)
今天聊聊记笔记这件事儿,在学习的过程中做好总结记录是非常重要的. 作者 | 小满&有三编辑 | 小满&有三 <人类简史>有一个有趣的现象描写:远古时期的智人是看什么就吃什 ...
插入始终是1_OneNote使用小记（1）——针对PPT做笔记及最合适的PPT插入方式
本人经常使用OneNote进行上课笔记的记录,本文大概总结一下我是如何在上课时针对PPT进行笔记记录的,以及非常重要的PPT插入所占空间的问题. 设备:普通笔记本电脑,无触控,故不使用绘图功能软件: ...
转：7招，教你在工作中高效做笔记
做笔记是再熟悉不过的事情,上学时不知道做过多少笔记,但是笔记的功效也是各有千秋.上学那会儿,喜欢抄成绩好的同学的笔记,他们的笔记通常都做的比较详细而且清晰. 有调查显示好学生的笔记是他们高效学习的秘密 ...

用Websocket聊天完整demo，做笔记用，各位大佬多多指教

用Websocket聊天完整demo，做笔记用，各位大佬多多指教相关推荐

最新文章

热门文章