chat.jsp > MODEL2

본문 바로가기
사이트 내 전체검색

MODEL2

chat.jsp

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 522회 작성일 23-03-18 18:15

본문

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<%@ include file="/include/header.jsp" %>


<style>

#main-container{

width:500px;

border:2px solid #cadef0;

border-radius:2px;

}

#chat-container{

border: 0px solid red;

min-height: 500px;

max-height: 500px;

overflow: scroll;

overflow-x:hidden;

overflow-y:auto;

background: #bacee0;

}

#bottom-container{

margin:5px;

}

#bottom-container2{

margin-bottom:5px;

}

#inputMessage{

width:100%;

height:30px;

border:1px solid #bacee0;

font-size:13px;

}

#btn-submit{

background: #F7E600;

width:60px;

height:26px;

color:#607080;

border:none;

border-radius:4px;

}

.chat{

font-size: 12px;

color:#666;

margin: 5px;

padding: 3px 6px 4px 6px;

text-align: left;

        height:auto;

        word-break : break-all;

        background: #ffffff;

        width:auto;

        display:inline-block;

        border-radius: 4px;

}

.my-chat{

text-align: right;

background: #ffeb33;

border-radius: 4px;

width:auto;

padding: 3px 6px 4px 6px;

}

.notice{

color:#777;

font-weight: bold;

border : none;

text-align: left;

background-color: #cadef0;

display: block;

}


.chat-info{

color:#556677;

font-size: 10px;

text-align: right;

padding: 5px;

padding-top: 0px;

}

.chat-box{

text-align:left;

}

.my-chat-box{

text-align: right;

}

</style>


<center>

<br>

<div id="main-container">

<div id="chat-container">


</div>

<div id="bottom-container">

<input id="inputMessage">

</div>

<div id="bottom-container2">

<input id="btn-submit" type="submit" value="전송" >

</div>

</div>

<br>

</center>


<script type="text/javascript">

var webSocket = new WebSocket('ws://192.168.10.111:8080/webChatServer'); //로컬 호스트 아이피 적용

var inputMessage = document.getElementById('inputMessage');


webSocket.onerror = function(e){

onError(e);

};


webSocket.onopen = function(e){

onOpen(e);

};


webSocket.onmessage = function(e){

onMessage(e);

};


function onMessage(e){

var chatMsg = event.data;

var date = new Date();

var dateInfo = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();


if(chatMsg.substring(0,6) == 'notice'){

var $chat = $("<div class='chat notice'>" + chatMsg + "</div>");

$('#chat-container').append($chat);

}else{

var $chat = $("<div class='chat-box'><div class='chat'>" + chatMsg + "</div><div class='chat-info chat-box'>"+ dateInfo +"</div></div>");

$('#chat-container').append($chat);

}


$('#chat-container').scrollTop($('#chat-container')[0].scrollHeight+20);

}


function onOpen(e){


}


function onError(e){

alert(e.data);

}


function send(){

var chatMsg = inputMessage.value;

if(chatMsg == ''){

return;

}


var date = new Date();

var dateInfo = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

var $chat = $("<div class='my-chat-box'><div class='chat my-chat'>" + chatMsg + "</div><div class='chat-info'>"+ dateInfo +"</div></div>");


$('#chat-container').append($chat);


webSocket.send(chatMsg);

inputMessage.value = "";

$('#chat-container').scrollTop($('#chat-container')[0].scrollHeight+20);

}

</script>


<script type="text/javascript">

$(function(){

$('#inputMessage').keydown(function(key){ //글 입력후 엔터를 쳤을 때 실행

if(key.keyCode == 13){

$('#inputMessage').focus();

send();

}

});

$('#btn-submit').click(function(){

send();

});

})

</script>


<%@ include file="/include/footer.jsp" %>

추천0

댓글목록

등록된 댓글이 없습니다.

회원로그인

회원가입

사이트 정보

공지사항
자유게시판
질문답변
1:1문의

 

별명 : 터푸가위
주소 : 부산시 동래구 명장로20번길 90
대표 : 박규태
메일 : dancepkt@******.com

접속자집계

오늘
173
어제
123
최대
10,760
전체
263,772
Copyright © dancePKT . All rights reserved.