javascript 웹 소켓 api 연결 : 웹 채팅 클라이언트 사이드

공개방송 채팅 클라이언트 사이드


<script>

//소켓연결
var socket = io("http://chat.weegle.kr:8865");

//연결 request
var chatConnect = {"chatId" : chatId};
socket.emit('onOpenLiveInfo',JSON.stringify(chatConnect));

//연결 성공시 response
socket.on('onOpenLiveInfo', function(socket){
openTvObjectId = socket.onOpenLiveInfo.openTvObjectId;
});


//시청자 목록 request
var liveMember = {
"chatId" : chatId,
"memberObjectId" : memberObjectId,
"bjObjectId" : bjObjectId,
"openTvObjectId" : openTvObjectId
};
socket.emit('onOpenLiveMembers',JSON.stringify(liveMember));

//시청자 목록 response
socket.on('onOpenLiveMembers', function(socket){
userType = socket.onOpenLiveMembers.userType;
});


//새 시청자 목록 response
socket.on('onOpenLiveMemberUpdate', function(res){
console.log(res);
var enter=res.onOpenLiveMemberUpdate;
var data = {
enter : { "memberName" :enter.member.memberName,"type" : enter.type }
};
    $("#enterTypeMsg").tmpl(data).appendTo(".chat_box");
 
    // bj가 방송 종료 할 경우
 
    if(enter.member.id==bjObjectId && enter.type==1){
    alert("BJ가 방송을 종료 하였습니다.");
    location.href="/list";
    }

});


//메세지전송 클릭 : 메세지 보내기
function msgSend(){
$(".msgSend_btn").click(function(){

//메세지창에 입력한 text
var msg = $(".msgBox").val();

//메세지 송신 request
var data = new Object();
data = {
"chatId" : chatId,
"messageTempId" : 1,
"memberObjectId" : memberObjectId,
"message" : msg,
"extern" : "{}",
"externType" : 1,
"lastDate" : 0
}

socket.emit('onOpenLiveMessage',JSON.stringify(data));
$(".msgBox").val('');
});
}


//메세지 인포 + 멤버정보 response
socket.on('onOpenLiveMessage', function(messageInfo){

var info = messageInfo.onOpenLiveMessage;
var msgInfo = info[0].messageInfo;
var memInfo = info[0].member;

var data = {
memberName :{"memberName" : memInfo.memberName},
    profileImage :{"profileImage" : staticDomain + memInfo.profileImage},
    msg :{"msg" : msgInfo.message},
    msg_class : {"msg_class" : msg_class},
    displayImg : {"displayImg" : displayImg},
    time : {"time" : time}
};

              //새 메세지가 들어오면 채팅창에 뿌려줌
$("#msg").tmpl(data).appendTo(".chat_box");

});

</script>