<html>
<head>
<meta charset="utf-8">
<title>Netty websocket 聊天室</title>
<style type="text/css">
.textarea-inherit {
width: 100%;
overflow: auto;
word-break: break-all;
background-attachment: fixed;
background-image: url('../images/wallViewPic/bg.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
font-size:14px;
}
.signalCss{
}
.center{
text-align: center;
font-size:28px;
<!--border: 1px solid red;-->
}
</style>
</head>
<body style="background-color:rgb(189,255,183)">
<form action="" onsubmit="return false;">
<div id="signal" class="signalCss" >
<div class="center">
接收信息
</div>
<textarea id="msgText" cols="100" rows="30"></textarea>
</div>
<div id="signal2" class="signalCss" >
<div class="center">
发送信息
</div>
<textarea id="sendText" cols="100" rows="30"></textarea>
<input type="button" id="sendButton" value="发送">
</div>
</form>
</body>
<script type="text/javascript">
var websocketUrl = "ws://119.3.167.38:54326";
var websocketUrl = "ws://123.207.136.134:9010/ajaxchattest";
var socket;
if(!window.WebSocket){
window.WebSocket = window.MozWebSocket;
}
if(window.WebSocket){
socket = new WebSocket(websocketUrl);
socket.onmessage = function(event){
console.log("收到消息"+ event.data.msgFun);
if((event.data instanceof Blob)||(event.data instanceof ArrayBuffer)){
var blob=event.data;
var previewImg = document.querySelector('img');
var reader = new FileReader();
// 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
reader.addEventListener("load", function () {
previewImg.src = reader.result;
}, false);
// 调用reader.readAsDataURL()方法，把图片转成base64
reader.readAsDataURL(blob);
}else{
var obj = JSON.parse(event.data); //由JSON字符串转换为JSON对象
if(obj.msgFun == 'commandMsg')
{
var strData = JSON.stringify(obj.msg);
console.log(strData);
var objData = JSON.parse(strData);
sendZch(strData);
}else if(obj.msgFun == 'keepAlive'){
var strData = JSON.stringify(obj.msg);
console.log(strData);
var objData = JSON.parse(strData);
sendZch(strData);
}
}
};
socket.onopen = function(event){
//alert("打开websocket服务正常");
register();
};
socket.onclose = function(event){
alert("websocket关闭");
};
setInterval(sendkeepAlive,10000);
}else{
alert("对不起，您的浏览器不支持WebSocket.");
}
document.getElementById("sendButton").onclick = function (ev) {
var text = document.getElementById("sendText").value;
console.log(text);
// text = JSON.stringify(text); //将JSON转为字符串存到变量里
sendMsg(text);
}
//注册消息
function register() {
if(!window.WebSocket){
return ;
}
var text = {
"msgFun":"register",
"msg":{
}
}
text = JSON.stringify(text); //将JSON转为字符串存到变量里
sendMsg(text);
}
//发送消息
function sendMsg(msg) {
if(!window.WebSocket){
return ;
}
if(socket.readyState == WebSocket.OPEN){
socket.send(msg);
}
}
//发送心跳
function sendkeepAlive(){
if(!window.WebSocket){
return ;
}
if(socket.readyState == WebSocket.OPEN){
var keepalive = {
"msgFun":"keepAlive",
"msg":{
},
}
keepalive = JSON.stringify(keepalive); //将JSON转为字符串存到变量里
sendMsg(keepalive);
}
}
function sendZch(zch){
var url = zch;
var text = document.getElementById("msgText").value;
document.getElementById("msgText").innerText = text + url;
}
</script>
</html>
网友评论