<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var toName;
var username;
function showChat(name){
toName = name;
// 显示聊天对话框
$('#chatArea').css("display", "inline");
// 显示正在和谁聊天
$('#chatMes').html("正在和<span>toName</span>聊天")
}
$(function () {
$.ajax({
url: 'getUsername',
success: function (res) {
username = res;
$("#username").html("用户：" + res + "<span style='color: green'>在线</span>")
},
async: false // 必须同步
})
// 创建webSocket对象
var ws = new WebSocket("ws://localhost/chat");
// 给ws绑定事件
ws.onopen = function () {
// 在建立连接后需要做什么事？
// 显示在线信息
$('#userName').html("用户：" + username + "<span>在线</span>")
}
// 接收到服务端推送的消息后触发
ws.onmessage = function (evt) {
// 获取服务端推送过来的消息
var dataStr = evt.data;
// 将dataStr 转化为json对象
var res = JSON.parse(dataStr);
// 判断是否是系统消息
if(res.isSystem){
// 系统消息
} else {
// 不是系统消息
}
}
ws.onclose = function () {
// 显示离线信息
$('#userName').html("用户：" + username + "<span>离线</span>")
}
$('#submit').click(function () {
// 获取输入的内容
var data = $('#context_text').val();
// 清除输入区的内容
$('#context_text').val("");
var json = {"toName": toName, "message": data}
// 发送数据给服务端
ws.send(JSON.stringify(json))
})
})
</script>
</body>
</html>