通知访客登陆的状态

pull/30/head
taoshihan1991 4 years ago
parent 47c90e4566
commit 2b437a6206

@ -9,19 +9,21 @@ import (
"net/http"
"time"
)
//聊天主界面
func ActionChatMain(w http.ResponseWriter, r *http.Request){
render:=tmpl.NewRender(w)
render.Display("chat_main",nil)
func ActionChatMain(w http.ResponseWriter, r *http.Request) {
render := tmpl.NewRender(w)
render.Display("chat_main", nil)
}
//获取在线用户
func ChatUsers(w http.ResponseWriter, r *http.Request){
func ChatUsers(w http.ResponseWriter, r *http.Request) {
w.Header().Set("content-type", "text/json;charset=utf-8;")
result:=make([]map[string]string,0)
for uid,_:=range clientList{
userInfo:=make(map[string]string)
userInfo["uid"]=uid
result=append(result,userInfo)
result := make([]map[string]string, 0)
for uid, _ := range clientList {
userInfo := make(map[string]string)
userInfo["uid"] = uid
result = append(result, userInfo)
}
msg, _ := json.Marshal(tools.JsonListResult{
JsonResult: tools.JsonResult{Code: 200, Msg: "获取成功"},
@ -29,8 +31,9 @@ func ChatUsers(w http.ResponseWriter, r *http.Request){
})
w.Write(msg)
}
//兼容之前的聊天服务
func ChatServer(w *websocket.Conn){
func ChatServer(w *websocket.Conn) {
var error error
for {
//接受消息
@ -39,55 +42,60 @@ func ChatServer(w *websocket.Conn){
log.Println("接受消息失败", error)
break
}
message := Message{}
err := json.Unmarshal([]byte(receive), &message)
if err != nil {
log.Println(err)
}
chat := ChatUserMessage{}
json.Unmarshal([]byte(receive), &chat)
log.Println("客户端:", message)
kfMessageData := KfMessageData{
Kf_name: "客服小美",
Avatar: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg",
Kf_id: "KF2",
Time: time.Now().Format("2006-01-02 15:04:05"),
Content: chat.Data.Content,
}
switch message.Type.(string) {
//用户初始化
log.Println("客户端:", receive)
var loginMsg Message
json.Unmarshal([]byte(receive), &loginMsg)
switch loginMsg.Type.(string) {
//用户上线
case "userInit":
clientList[message.Uid.(string)] = w
sendMsg := ChatKfMessage{
Message_type: "kf_online",
Data: kfMessageData,
//用户id对应的连接
clientList[loginMsg.Uid.(string)] = w
if len(kefuList)==0{
websocket.Message.Send(w, "无客服在线")
}else{
//发送给客服通知
for _, conn := range kefuList {
result := make([]map[string]string, 0)
for uid, _ := range clientList {
userInfo := make(map[string]string)
userInfo["uid"] = uid
result = append(result, userInfo)
}
msg:=NoticeMessage{
Type: "notice",
Data:result,
}
str,_:=json.Marshal(msg);sendStr:=string(str)
websocket.Message.Send(conn,sendStr)
}
}
jsonStrByte, _ := json.Marshal(sendMsg)
log.Println("服务端:", string(jsonStrByte))
websocket.Message.Send(w, string(jsonStrByte))
//正常发送消息
case "chatMessage":
//客服上线
case "kfOnline":
//客服id对应的连接
kefuList[loginMsg.Uid.(string)] = w
sendMsg := ChatKfMessage{
Message_type: "chatMessage",
Data: kfMessageData,
Message_type: "kfOnline",
Data: KfMessageData{
Kf_name: loginMsg.Name,
Avatar: loginMsg.Avatar,
Kf_id: loginMsg.Uid,
Time: time.Now().Format("2006-01-02 15:04:05"),
Content: "客服上线",
},
}
jsonStrByte, _ := json.Marshal(sendMsg)
log.Println("服务端:", string(jsonStrByte))
websocket.Message.Send(w, string(jsonStrByte))
//回应ping
case "ping":
sendMsg := PingMessage{
Type: "pong",
log.Println("发送给客户",clientList,string(jsonStrByte))
for _, conn := range clientList {
websocket.Message.Send(conn, string(jsonStrByte))
}
jsonStrByte, _ := json.Marshal(sendMsg)
log.Println("服务端:", string(jsonStrByte))
websocket.Message.Send(w, string(jsonStrByte))
case "chatMessage":
}
}
}
//客户登陆和客服登陆发送的消息
type Message struct {
Type interface{}
Uid interface{}
@ -118,8 +126,10 @@ type ChatUserMessage struct {
Message_type interface{} `json:"message_type"`
Data UserMessageData `json:"data"`
}
type PingMessage struct {
type NoticeMessage struct {
Type interface{} `json:"type"`
Data interface{} `json:"data"`
}
var clientList =make(map[string]*websocket.Conn)
var clientList = make(map[string]*websocket.Conn)
var kefuList = make(map[string]*websocket.Conn)

@ -9,10 +9,11 @@
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
<style>
html, body {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
.el-row{width:100%}
.chatLeft{border-bottom: solid 1px #e6e6e6}
.el-row{width:100%}#app{margin-top: 10px;}
.chatLeft{border-bottom: solid 1px #e6e6e6;overflow: hidden;}
.sw-bg{background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;}
.chatContext .el-row{margin-bottom: 5px;}
.chatUser{
@ -57,9 +58,9 @@
<el-row :gutter="5">
<el-col :span="6">
<el-menu class="chatLeft">
<el-menu-item>
<el-menu-item v-for="v in onlineUsers" v-bind:key="v" v-on:click="talkTo(v.uid)">
<i class="el-icon-user"></i>
<span slot="title">访客1112</span>
<span slot="title">访客:<{v.uid}></span>
</el-menu-item>
</el-menu>
</el-col>
@ -85,7 +86,7 @@
</el-col>
<el-col :span="6">
<div class="sw-bg">
sss
常用功能
</div>
</el-col>
</el-row>
@ -98,15 +99,66 @@
delimiters:["<{","}>"],
data: {
fullscreenLoading:true,
onlineUsers:[],
server:"ws://127.0.0.1:8080/chat_server",
socket:null,
},
methods: {
//跳转
openUrl(url){
window.location.href=url;
},
getOnlineUsers(){
let _this=this;
$.get('/chat_users',function (rs) {
_this.onlineUsers=rs.result
_this.fullscreenLoading=false;
}).then(()=>{
_this.fullscreenLoading=false;
});
},
//初始化websocket
initConn(){
let socket=new ReconnectingWebSocket(this.server);//创建Socket实例
this.socket = socket
this.socket.onmessage = this.OnMessage;
this.socket.onopen = this.OnOpen;
},
OnOpen(){
let data={};
data.type="kfOnline";
data.uid="kf_1";
data.name="客服丽丽";
data.avatar="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg";
data.group="1";
this.socket.send(JSON.stringify(data));
},
OnMessage(e){
const redata = JSON.parse(e.data);
if (redata.type=="notice"){
this.$notify({
title: "通知",
message: "新客户访问",
type: 'success',
duration: 0,
});
this.onlineUsers=redata.data;
}
},
//接手客户
talkTo(guestId){
let data={};
data.type="kfOnline";
data.uid="kf_1";
data.name="客服丽丽";
data.avatar="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4217138672,2588039002&fm=26&gp=0.jpg";
data.group="1";
socket.send(JSON.stringify(data));
},
},
created: function () {
this.fullscreenLoading=false
this.getOnlineUsers();
this.initConn();
}
})

@ -57,7 +57,6 @@
</el-form-item>
<el-form-item>
<el-button :loading="loading" type="primary" @click="">本地验证</el-button>
<el-button @click="window.location.href='/main'">设置账户</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
@ -77,6 +76,22 @@
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="MYSQL认证" name="third">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="server">
<el-input v-model="ruleForm.server" placeholder="MYSQL服务地址"></el-input>
</el-form-item>
<el-form-item prop="email">
<el-input v-model="ruleForm.email" placeholder="MYSQL用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" placeholder="MYSQL密码"></el-input>
</el-form-item>
<el-form-item>
<el-button :loading="loading" type="primary" @click="submitForm('ruleForm')">MYSQL验证</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<p class="mt-5 mb-3 text-muted">&copy; 2020</p>

@ -103,11 +103,11 @@
this.websock.onclose = this.websocketclose;
},
websocketonopen(){ //连接建立之后执行send方法发送数据
let actions = "ping";
let _this=this;
setInterval(function(){
_this.websocketsend(JSON.stringify(actions));
},10000);
// let actions = "ping";
// let _this=this;
// setInterval(function(){
// _this.websocketsend(JSON.stringify(actions));
// },10000);
},
websocketonerror(){//连接建立失败重连
this.initWebSocket();
@ -775,9 +775,9 @@
state?($('#msg-area').attr('readonly', 'readonly')):$('#msg-area').removeAttr('readonly');
},ping = function(time){
//每30秒ping服务器
setInterval(function(){
socket.send('{"type":"ping"}');
},time);
// setInterval(function(){
// socket.send('{"type":"ping"}');
// },time);
},showTime = function(msg){
var _html = '<div class="swchat-chat-time"><span>' + msg.content + '</span></div>';
$("#swchat-chat-list ul").append(_html);

@ -4,6 +4,7 @@
<el-menu-item class="mainLogo" v-on:click="openUrl('/login')">GO-IMAP</el-menu-item>
<el-menu-item index="2" v-on:click="openIframeUrl('/list')">邮箱<el-badge class="mark" :value="mailTotal" style="margin-bottom: 20px;"/>
</el-menu-item>
<el-menu-item index="3" v-on:click="openIframeUrl('/chat_main')">聊天</el-menu-item>
<el-menu-item index="4" v-on:click="openIframeUrl('/setting')">设置</el-menu-item>
<el-menu-item index="10" v-on:click="openIframeUrl('/login')">退出</el-menu-item>
</el-menu>
Loading…
Cancel
Save