PHP 基于 SW-X 框架，搭建WebSocket服务器（二）

$(function(){
var lockReconnect = false; // 正常情况下我们是关闭心跳重连的
var wsServer; // 连接地址
var websocket; // ws实例
var time; // 心跳检测定时器指针
var user_id; // 用户ID
var username; // 用户昵称
$('#user_id').val(random(100000, 999999));
$('#username').val(getRandomName(3));

// 点击连接
$('#open').click(function(){createWebSocket();})
// 点击断开
$('#close').click(function(){addLog('主动断开连接');websocket.close();})
// 发送消息
$('#send').click(function(){
var content = $('#content').val();
if (content == '' || content == null) {
alert('请先输入内容');
return false;
}
// 自己
$('.main').append('');
// 广播消息
send('user/broadcast', {
'content':content
})
$('#content').val('');
saveScroll('.main')
})
// 发送数据到服务端
function send(action, data) {
// 补充用户信息
data.user_id = $('#user_id').val()
data.username = $('#username').val()
// 组装SW-X的固定格式
var body = {
'action' : action,
'data' : data,
}
body = JSON.stringify(body);
websocket.send(body);
addLog('发送数据：'+body);
}

// 记录log
function addLog(msg) {$('.log').append('');saveScroll('.log')}

// 启动websocket
function createWebSocket() {
var time = Date.now() / 1000;
var host = $('#host').val();
user_id = $('#user_id').val();
username = $('#username').val();
if (host == '' || host == null) {
alert('请先输入host地址');
return false;
}
if (user_id == '' || user_id == null) {
alert('请先输入user_id');
return false;
}
if (username == '' || username == null) {
alert('请先输入用户名');
return false;
}
wsServer = host+'?user_id='+user_id+'&username='+username+'&time='+time+'&sign='+$.md5(user_id+time);
try {
websocket = new WebSocket(wsServer);
init();
} catch(e) {
reconnect();
}
}
// 初始化WebSocket
function init() {
// 接收Socket断开时的消息通知
websocket.onclose = function(evt) {
addLog('Socket断开了...正在试图重新连接...');
reconnect();
};
// 接收Socket连接失败时的异常通知
websocket.onerror = function(e){
addLog('Socket发生异常...正在试图重新连接...');
reconnect();
};
// 连接成功
websocket.onopen = function (evt) {
addLog('连接成功');
// 心跳检测重置
heartCheck.start();
};
// 接收服务端广播的消息通知
websocket.onmessage = function(evt){
var data = evt.data;
addLog('接收到服务端消息：'+data);
var obj = JSON.parse(data);

// 消息处理
switch (obj.action) {
// 上下线
case 10001:
var body = obj.data;
$('.main').append('');

// 登录
if ($('#userid_'+body.user_id).html() == undefined) {
$('.user_list ul').append('+body.user_id+'">'+body.username+'在线');
} else {
// 重登
if (body.status == 1) {
$('#userid_'+body.user_id+' code').removeClass('offline');
$('#userid_'+body.user_id+' code').addClass('online');
$('#userid_'+body.user_id+' code').html('在线');
// 下线
} else {
$('#userid_'+body.user_id+' code').removeClass('online');
$('#userid_'+body.user_id+' code').addClass('offline');
$('#userid_'+body.user_id+' code').html('离线');
}
}
saveScroll('.main')
break;
// 收到普通消息
case 10002:
var body = obj.data;
// 对方
$('.main').append('');
saveScroll('.main')
break;
// 回复了一次心跳
case 10003:
// 心跳检测重置
heartCheck.start();
break;
default:
break;
}
};
}
// 掉线重连
function reconnect() {
if(lockReconnect) {
return;
};
lockReconnect = true;
// 没连接上会一直重连，设置心跳延迟避免请求过多
time && clearTimeout(time);
time = setTimeout(function () {
createWebSocket();
lockReconnect = false;
}, 5000);
}
// 心跳检测
var heartCheck = {
timeout: 5000,
timeoutObj: null,
serverTimeoutObj: null,
start: function() {
var self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function(){
// 这里需要发送一个心跳包给服务端
send('user/heart', {})
}, this.timeout)
}
}

// 生成ID
function random(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// 解码
function decodeUnicode(str) {
//Unicode显示方式是\u4e00
str = "\\u"+str
str = str.replace(/\\/g, "%");
//转换中文
str = unescape(str);
//将其他受影响的转换回原来
str = str.replace(/%/g, "\\");
return str;
}
// 生成中文名
function getRandomName(NameLength){
let name = ""
for(let i = 0;i<NameLength;i++){
let unicodeNum = ""
unicodeNum = random(0x4e00,0x9fa5).toString(16)
name += decodeUnicode(unicodeNum)
}
return name
}
// 获得当前日期
function getDate() {
var oDate = new Date();
return oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
}
// 滚动到底部
function saveScroll(id) {
$(id).scrollTop( $(id)[0].scrollHeight );
}
})