html私密聊天建立,html/chat.html · 甘永文/使用 workerMan 搭建一个简单的聊天室 - Gitee.com...

Aven 的聊天室

.content{

width: 700px;

margin: auto;

}

.box{

padding-bottom: 3px;

padding-top: 3px;

}

.box input{

width: 70%;

}

.box button{

width: 25%;

}

设置昵称

发送

var ws;

var connected = false;

$(function () {

$("#setName").click(function () {

var name = $('input[name=name]').val().trim();

if (name==''){

alert('昵称不能为空');

return;

}

sendData('setName',{name:name});

});

$("#send").click(function () {

var message = $('input[name=message]').val().trim();

if (message==''){

alert('内容不能为空');

return;

}

sendData('message',{message:message});

})

ws = new WebSocket("ws://gitee88.com:2346");

ws.onopen = function() {

console.log('WebSocket 连接成功');

connected = true;

};

ws.onmessage = function(e) {

// e.data

try {

var data = JSON.parse(e.data);

//非法数据，不处理

if (!data.hasOwnProperty("code")) return;

if (data.code != 0){

if (data.hasOwnProperty("msg")){

alert(data.msg);

}

return

}

if (!data.hasOwnProperty("data") || !data.hasOwnProperty("type") || !data.hasOwnProperty("data")) return;

switch (data.type){

case 'message':

addChatItem(data.data.name,data.data.message)

break;

case 'msg':

alert(data.data.msg)

break;

}

}catch (ex) {

}

};

});

function addChatItem( name,message ) {

var temp = '

__NAME__ 说：

__CONTENT__

';

temp = temp.replace( "__NAME__",name );

temp = temp.replace( "__CONTENT__",message );

$("#content").append(temp);

}

function sendData(type,data) {

if(ws.readyState != 1){

alert(connected ? "连接已中断" : "连接不成功");

return;

}

ws.send(JSON.stringify({type:type,data:data}));

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史