|
|
@@ -0,0 +1,331 @@
|
|
|
+//设置 cookie
|
|
|
+function setCookie(c_name,value,expiredays){ // 名称 值 时间
|
|
|
+ var exdate=new Date()
|
|
|
+ exdate.setDate(exdate.getDate()+expiredays)
|
|
|
+ document.cookie=c_name+ "=" +escape(value)+
|
|
|
+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
|
|
|
+}
|
|
|
+//获取 cookie
|
|
|
+function getCookie(c_name){ // 名称
|
|
|
+ if (document.cookie.length>0)
|
|
|
+ {
|
|
|
+ c_start=document.cookie.indexOf(c_name + "=")
|
|
|
+ if (c_start!=-1)
|
|
|
+ {
|
|
|
+ c_start=c_start + c_name.length+1
|
|
|
+ c_end=document.cookie.indexOf(";",c_start)
|
|
|
+ if (c_end==-1) c_end=document.cookie.length
|
|
|
+ return unescape(document.cookie.substring(c_start,c_end))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ""
|
|
|
+}
|
|
|
+
|
|
|
+var socket='';
|
|
|
+Socket = function(){
|
|
|
+ this.socket='';
|
|
|
+ this.init();
|
|
|
+ this.content();
|
|
|
+}
|
|
|
+Socket.prototype={
|
|
|
+ init:function(){
|
|
|
+ this.socket = io.connect();
|
|
|
+ },
|
|
|
+ content:function(){
|
|
|
+ if(getCookie("name")!=''){
|
|
|
+ this.socket.emit('login',{"name":getCookie("name"),"img":localStorage.getItem('img'),"id":getCookie("id")});
|
|
|
+ }
|
|
|
+
|
|
|
+ this.socket.on('login',function(r){
|
|
|
+ setCookie('id',r.id,10);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.socket.on('AllUser',function(r){
|
|
|
+ document.querySelector(".chat_room .user_list .list").innerHTML='';
|
|
|
+ var html='';
|
|
|
+
|
|
|
+ for (let i = 0; i < r.AllUser.length; i++) {
|
|
|
+ if(getCookie("id") == r.AllUser[i].id){
|
|
|
+ var dd = "color:red;";
|
|
|
+ }else{
|
|
|
+ var dd = "";
|
|
|
+ }
|
|
|
+ html += `
|
|
|
+ <div class="list_1" id="`+r.AllUser[i].id+`" title="`+r.AllUser[i].name+`">
|
|
|
+ <div class="img" onclick="user_info(this,'`+r.AllUser[i].id+`')"><img src="`+r.AllUser[i].img+`" alt=""></div>
|
|
|
+ <div class="name" style="`+dd+`padding-bottom: 9px; height: 21px;overflow: hidden;box-sizing: border-box;margin-top: 6px;margin-left: 49px;">`+r.AllUser[i].name+`</div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ document.querySelector(".chat_room .user_list .list").innerHTML=html;
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ this.socket.on('send',function(r){//接受信息
|
|
|
+
|
|
|
+ if(r.id == getCookie("id")){//判断发送消息的对象是谁
|
|
|
+ var type = "me";
|
|
|
+ }else{
|
|
|
+ var type = "other";
|
|
|
+ }
|
|
|
+
|
|
|
+ if(r.accept=="all"){//判断是否为公共聊天室
|
|
|
+
|
|
|
+ let content = document.querySelectorAll(".chat_room>.content");
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ if(content[i].getAttribute("id") == r.accept){
|
|
|
+ chat_information(type,r.id,r.img,r.name,r.content,r.date,content[i]);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{//私聊
|
|
|
+
|
|
|
+ var bool = true;
|
|
|
+ let length = document.querySelectorAll(".chat_room>.list .list_1")
|
|
|
+ for (let i = 0; i < length.length; i++) {
|
|
|
+ if(length[i].getAttribute("id") == r.accept||length[i].getAttribute("id") == r.send){//判断是否有聊天用户列表
|
|
|
+ bool=false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(bool){
|
|
|
+ private_chat('',0,r.name,r.img,r.id);//私聊操作 显示用户列表 聊天框
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let content = document.querySelectorAll(".chat_room>.content");
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ if(content[i].getAttribute("id") == r.accept||content[i].getAttribute("id") == r.send){//找到聊天框
|
|
|
+ chat_information(type,r.id,r.img,r.name,r.content,r.date,content[i]);//显示消息内容
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var list = document.querySelectorAll(".chat_room>.list>.list_1");
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ if(list[i].getAttribute("id") == r.send||list[i].getAttribute("id") == r.accept){
|
|
|
+ if(list[i].className!="list_1 on"){//接受信息的框如果不是在现在显示的 就加个红点提示有消息
|
|
|
+ if(!list[i].querySelector(".prompt")){
|
|
|
+ var prompt = document.createElement("div");
|
|
|
+ prompt.className = "prompt";
|
|
|
+ prompt.innerHTML = '.';
|
|
|
+ list[i].appendChild(prompt);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+if(getCookie("name")==''||localStorage.getItem('img')==''){//判断是否有设置名称和头像
|
|
|
+ document.querySelector(".setting .img img").src=localStorage.getItem('img');
|
|
|
+ document.querySelector(".setting .info .name").value=getCookie("name");
|
|
|
+ document.querySelector(".setting").style.display='block';
|
|
|
+}else{
|
|
|
+ document.querySelector("body").removeChild(document.querySelector(".setting"));
|
|
|
+ socket = new Socket();//new 一个socket对象
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+var chant_id="all";//当前聊天室id
|
|
|
+
|
|
|
+
|
|
|
+changepic=function(This,img) {//头像上传后执行的函数
|
|
|
+ var reads= new FileReader();
|
|
|
+ f=This.files[0];
|
|
|
+ reads.readAsDataURL(f);
|
|
|
+
|
|
|
+ fileSize =This.files[0].size;
|
|
|
+ var size = fileSize / 1024;
|
|
|
+ var fileMaxSize = 1024;//设置头像大小不能超过300K
|
|
|
+ if (size > fileMaxSize) {
|
|
|
+ alert("文件大小不能大于1M！");
|
|
|
+ This.value = "";
|
|
|
+ return false;
|
|
|
+ }else if (size <= 0) {
|
|
|
+ alert("文件大小不能为0M！");
|
|
|
+ }
|
|
|
+ reads.onload=function (e) {
|
|
|
+ img.src=this.result;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// type 聊天类型id id 聊天id img 头像 name 名称 content 内容 date 时间 create_obj 创建在哪个div聊天框中
|
|
|
+chat_information=function(type,id,img,name,content,date,create_obj){//添加消息内容
|
|
|
+
|
|
|
+ var div = document.createElement("div");
|
|
|
+ div.className=type;
|
|
|
+ div.innerHTML=`
|
|
|
+ <div class="img" id="`+id+`" onclick="user_info(this,'`+id+`')">
|
|
|
+ <img src="`+img+`" alt="">
|
|
|
+ </div>
|
|
|
+ <p class="name">`+name+`</p><br/><br/>
|
|
|
+ <p class="content">
|
|
|
+ `+decodeURI(content)+`
|
|
|
+ <span class="date">`+date+`</span>
|
|
|
+ </p>`;
|
|
|
+ create_obj.appendChild(div);
|
|
|
+ create_obj.scrollTop = create_obj.scrollHeight;//将聊天框滚动到最底部
|
|
|
+}
|
|
|
+
|
|
|
+issetting=function(){//判断是否有设置头像 名称
|
|
|
+ if(document.querySelector(".ok")){
|
|
|
+ document.querySelector(".ok").onclick=function(){
|
|
|
+ var img = document.querySelector(".setting .img img").src;
|
|
|
+ var name = document.querySelector(".setting_main .info .name").value;
|
|
|
+ if(img==''||name==''){
|
|
|
+ alert("不能为空，请重新输入！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setCookie('name',name,10); //设置cookie
|
|
|
+ localStorage.setItem('img',img);//将头像放置到 localStorage中
|
|
|
+ alert("设置成功!");
|
|
|
+ document.querySelector("body").removeChild(document.querySelector(".setting"));
|
|
|
+ socket = new Socket();//new 一个socket对象
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+issetting();
|
|
|
+
|
|
|
+send=function(This){//发送消息
|
|
|
+ if(This.parentNode.querySelector(".input_content").value.trim()==''){
|
|
|
+ This.parentNode.querySelector(".input_content").value='';
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var type = chant_id;//获取当前聊天的id
|
|
|
+ var img = localStorage.getItem('img');//获取头像
|
|
|
+ var name = getCookie("name");//获取用户名
|
|
|
+ var content = This.parentNode.querySelector(".input_content").value;//获取聊天的内容
|
|
|
+ content = encodeURI(content);//将聊天的内容url编码
|
|
|
+ var DATE =new Date();
|
|
|
+ var date = DATE.getHours()+":"+DATE.getMinutes()+":"+DATE.getSeconds();//时间
|
|
|
+
|
|
|
+ This.parentNode.querySelector(".input_content").value='';//清空聊天框内容
|
|
|
+
|
|
|
+ socket.socket.emit("send",{"accept":type,"send":getCookie("id"),'id':getCookie("id"),"img":img,"name":name,"content":content})//发送给请求给服务器
|
|
|
+}
|
|
|
+
|
|
|
+user_info=function(This,id){//点击头像 会显示该用户的信息 可进行私聊
|
|
|
+ if(getCookie("id")==id){//如果点击的是自己的头像 就不显示
|
|
|
+ alert("自己");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var div = document.createElement("div");
|
|
|
+ div.className="setting";
|
|
|
+ div.style.display='block';
|
|
|
+ var html=`
|
|
|
+ <div class="setting_main" style="height: 250px;">
|
|
|
+ <div class="img">
|
|
|
+ <img src="`+This.querySelector("img").src+`"/>
|
|
|
+ </div>
|
|
|
+ <div onclick="document.querySelector('body').removeChild(document.querySelector('.setting'))" style="position: absolute;top: 9px;right: 11px;color: #757575; cursor: pointer;">X</div>
|
|
|
+ <div style="text-align: center;margin-top:10px;">`+This.parentNode.querySelector(".name").innerHTML+`</div>
|
|
|
+ <input type="button" value="私聊" class="ok" onclick="private_chat(this,1,'`+This.parentNode.querySelector(".name").innerHTML+`','`+This.querySelector("img").src+`','`+id+`')">
|
|
|
+ </div>`;
|
|
|
+ div.innerHTML=html;
|
|
|
+ document.querySelector("body").appendChild(div);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+private_chat=function(This,bool,name,img,id){
|
|
|
+ //私聊操作 This 触发对象 bool (判断是私聊的 还是被私聊的 1是私聊的 0被私聊) name 名称 img 头像 id
|
|
|
+
|
|
|
+ var qq = true;
|
|
|
+ let list_1 = document.querySelectorAll(".chat_room>.list .list_1");
|
|
|
+ for (let i = 0; i < list_1.length; i++) {
|
|
|
+ if(list_1[i].getAttribute("id") == id){//判断聊天列表中 是否有该用户
|
|
|
+ qq=false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(qq){//聊天列表中没有改用户 创建聊天列表 创建聊天框
|
|
|
+ var div = document.createElement("div");
|
|
|
+ div.className = 'list_1';
|
|
|
+ div.id = id;
|
|
|
+ div.onclick=function(){char_list(this);};
|
|
|
+ div.innerHTML=`
|
|
|
+ <div class="img"><img src="`+img+`" alt=""></div>
|
|
|
+ <div class="title">`+name+`</div>
|
|
|
+ <div class="info"></div>`;
|
|
|
+
|
|
|
+ var content_div = document.createElement("div");
|
|
|
+ content_div.className = "content";
|
|
|
+ content_div.id = id;
|
|
|
+ content_div.style.display = "none";
|
|
|
+
|
|
|
+ document.querySelector(".chat_room .list").appendChild(div);
|
|
|
+ document.querySelector(".chat_room").appendChild(content_div);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(bool==1){//如果是主动私聊的 就将跟该用户的聊天列表和聊天框显示出来
|
|
|
+ chant_id = id;
|
|
|
+ char_list_on(id)
|
|
|
+ chat_room_content_on(id)
|
|
|
+ }
|
|
|
+
|
|
|
+ if(document.querySelector(".setting")){//删除查看用户信息的弹窗
|
|
|
+ document.body.removeChild(document.querySelector(".setting"));
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+char_list_on=function(id){//切换至某个用户列表显示
|
|
|
+ let list_1 = document.querySelectorAll(".chat_room .list .list_1");
|
|
|
+ for (let i = 0; i < list_1.length; i++) {
|
|
|
+ list_1[i].className = "list_1";
|
|
|
+ if(list_1[i].getAttribute("id") == id){
|
|
|
+ list_1[i].className = "list_1 on";
|
|
|
+ if(list_1[i].querySelector(".prompt")){
|
|
|
+ list_1[i].removeChild(list_1[i].querySelector(".prompt"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+chat_room_content_on=function(id){//切换至某个用户聊天框显示
|
|
|
+ let content = document.querySelectorAll(".chat_room>.content");
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ content[i].style.display = "none";
|
|
|
+ if(content[i].getAttribute("id") == id){
|
|
|
+ content[i].style.display = "block";
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+char_list=function(This){//列表点击切换 并切换聊天框
|
|
|
+ chant_id=This.getAttribute("id");
|
|
|
+ var length = document.querySelectorAll(".chat_room .list .list_1");
|
|
|
+ for (let i = 0; i < length.length; i++) {
|
|
|
+ length[i].className = "list_1";
|
|
|
+ }
|
|
|
+ This.className= "list_1 on";
|
|
|
+
|
|
|
+ if(This.querySelector(".prompt")){
|
|
|
+ This.removeChild(This.querySelector(".prompt"));
|
|
|
+ }
|
|
|
+
|
|
|
+ chat_room_content_on(This.getAttribute("id"));//切换至某个用户聊天框显示
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+document.querySelector(".input_content").onfocus=function(){//聊天输入框的回车事件
|
|
|
+ document.onkeyup = function (e) {//按键信息对象以函数参数的形式传递进来了，就是那个e
|
|
|
+ var code = e.charCode || e.keyCode; //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)
|
|
|
+ if (code == 13) {//code 为 13 是回车
|
|
|
+ document.querySelector(".chat_room .input input").click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
enenhaha