webrtc scoket 聊天
let webObj = null;//全局WebSocket对象
let lockReconnect = false; // 网络断开重连
let wsCreateHandler = null; // 创建连接
let username = null; // 当前登录人姓名
let userId = null; //当亲登录人id
let toName = null; //消息接收人姓名
let toId = null;//消息接收人id
$(function() {
$(".bg_change_size").remove();
// 在ajax请求开始前将请求设为同步请求：$.ajaxSettings.async = false。
// 在ajax请求结束后不要忘了将请求设为异步请求，否则其他的ajax请求也都变成了同步请求 $.ajaxSettings.async = true。
$.ajax({
async: false,
type: 'GET',
url: "/index/getUsername",
success: function(res) {
if (!res.userId || !res.username) {
location.href = '/index/toIndex';
}
username = res.username;
userId = res.userId;
}
});
// 创建webSocket对象
createWebSocket();
// 发送消息到服务器
$(".sendMsg").on("click", function() {
sendMessage();
})
});
/**
* @title 创建连接
*/
function createWebSocket() {
try {
// 获取访问路径,带有端口号：ws://localhost/webSocket/001
let host = window.location.host;
// 创建WebSocket连接对象
webObj = new WebSocket(`ws://${host}/webSocket/${userId}`);
// 加载组件
initWsEventHandle();
} catch (e) {
ml.msgBox("连接出错，正在尝试重新连接，请稍等。。。");
// 尝试重新连接服务器
reconnect();
}
}
/**
* @title 初始化组件
*/
function initWsEventHandle() {
try {
// 建立连接
webObj.onOpen = function(evt) {
onWsOpen(evt);
// 建立连接之后，开始传输心跳包
heartCheck.start();
};
// 传送消息
webObj.onmessage = function(evt) {
// 发送消息
onWsMessage(evt);
// 接收消息后 也需要心跳包的传送
heartCheck.start();
};
// 关闭连接
webObj.onclose = function(evt) {
// 关闭连接，可能是异常关闭，需要重新连接
onWsClose(evt);
// 尝试重新连接
reconnect();
};
// 连接出错
webObj.onerror = function(evt) {
// 连接出错
onWsError(evt);
// 尝试重新连接
reconnect();
}
} catch (e) {
if (e) {
conlog("catch", e);
}
ml.msgBox("初始化组件失败，正在重试，请稍后。。。");
// 尝试重新创建连接
reconnect();
}
}
/**
* @title 建立连接
*/
function onWsOpen(e) {
if (e.data) {
conlog("onWsOpen", e.data);
}
ml.msgBox("建立连接成功。。。");
}
/**
* @title 传送消息内容
*/
function onWsMessage(e) {
if (e.data) {
conlog("onWsMessage", e.data);
}
let jsonStr = e.data;
//接收到服务器推送的消息后触发事件
message(e);
}
/**
* @title 关闭连接
*/
function onWsClose(e) {
if (e.data) {
conlog("onWsClose", e.data);
}
ml.msgBox("连接关闭，尝试重新连接服务器，请稍侯。。。");
closeFun(e);
}
/**
* @title 连接出错
*/
function onWsError(e) {
ml.msgBox("连接出错，正在尝试重新连接服务器，请稍侯。。。" + e.data);
}
/**
* @title 输出数据到控制台
*/
function conlog(msg) {
conlog('', msg);
}
/**
* @title 输出数据到控制台
*/
function conlog(title, msg) {
let content = msg;
if (title) {
content = `${title}：${msg}`;
}
console.log(`${content}`);
}
/**
* @title 异常处理
* @Desc 处理可以检测到的异常，并尝试重新连接
*/
function reconnect() {
if (lockReconnect) {
return;
}
conlog("reconnect");
ml.msgBox("正在尝试重新连接，请稍侯。。。");
lockReconnect = true;
// 没链接上会一直连接，设置延迟，避免过多请求
wsCreateHandler && clearTimeout(wsCreateHandler);
wsCreateHandler = setTimeout(function() {
ml.msgBox("正在重新连接。。。");
createWebSocket();
lockReconnect = false;
ml.msgBox("重连完成。。。");
}, 1000);
}
/**
* @title 心跳检测
* @Desc 网络中断，系统无法捕获，需要心跳检测实现重新连接
*/
var heartCheck = {
// 在15s内若没收到服务端消息，则认为连接断开，需要重新连接
timeout: 15000, // 心跳检测触发时间
timeoutObj: null,
serverTimeoutObj: null,
// 重新连接
reset: function() {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
this.start();
},
// 开启定时器
start: function() {
let self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function() {
ml.msgBox("发送ping到后台服务。。。");
try {
webObj.send("PING");
} catch (e) {
ml.msgBox("发送ping异常。。。");
}
//内嵌定时器
self.serverTimeoutObj = setTimeout(function() {
// 若onclose方法会执行reconnect方法，我们只需执行close()就行，
// 若直接执行reconnect会触发onclose导致重连两次
ml.msgBox("没有收到后台数据，关闭连接。。。");
webObj.close();
//reconnect();
}, self.timeout);
}, this.timeout);
}
};
/**
* @title 组织并解析数据
*/
function message(e) {
//获取服务端推送过来的消息
let message = e.data;
// 将message转为JSON对象
let res = JSON.parse(message);
// 是否为系统消息
if (res.systemMsgFlag) {
let allNames = res.message;
//1. 好友列表展示 2. 系统推广
let userListStr = "";
let broadcastListStr = "";
let imgUrl = "../imgs/chatIc.png";
for (let user of allNames) {
if (user.userId != userId) {
userListStr += `<li class="friend-li" οnclick='chatWith("${user.userId}","${user.username}",this);'><img src="${imgUrl}" class='friendList-img'><span>${user.username}</span></li>`;
broadcastListStr += `<li style='color:#9d9d9d;font-family:宋体;'>
<span style='font-size:5px;color:black;'>${user.dateStr}</span><br/>
好友<span>${user.username}</span>上线了!
</li>`;
}
}
$(".friend-list").html(userListStr);
$(".sys-msg").html(broadcastListStr);
} else {
// 不是系统消息
let msgText = res.message;
let msg = `<li class='friend-msg-li'><img src='${imgUrl}' class='img'/><span class='friend-span'>${msgText}</span></li>`;
if (toId === res.fromId) {
$(".chat-msg").append(msg);
}
let chatData = sessionStorage.getItem(res.fromId);
if (chatData) {
msg = chatData + msg;
}
sessionStorage.setItem(res.fromId, msg);
$(".chat-main")[0].scrollTop = $(".chat-main")[0].scrollHeight;
}
}
// 关闭连接
function closeFun(e) {
let tips = `<span style='font-size:5px;color:black;'>${new Date()}</span><br/>`;
$(".sys-msg").html(`${tips}用户：${username}<span style="float:right;color:red;">离开了</span>`);
}
// 选择好友
function chatWith(id, name, obj) {
toId = id;
toName = name;
$(".edit-msg").attr("disabled", false);
$(".div-btn").show();
$(".chat-msg").show();
$(obj).addClass("selected-li").siblings().removeClass("selected-li");
let chatNow = `正在和<span style="color: #db41ca;">${name}</span>聊天`;
$(".div-main-title").html(chatNow);
$(".chat-msg").html("");
var chatData = sessionStorage.getItem(toId);
if (chatData) {
//渲染聊天数据到聊天区
$(".chat-msg").html(chatData);
}
$(".chat-main")[0].scrollTop = $(".chat-main")[0].scrollHeight;
}
/**
* @title 组织和发送消息到服务器
*/
function sendMessage() {
// 发送消息
if (!toId || !toName) {
ml.tips("sendMsg", "请选择好友...");
return;
}
let msg = $(".edit-msg").val();
if (!msg) {
let webObj = null;//全局WebSocket对象
let lockReconnect = false; // 网络断开重连
let wsCreateHandler = null; // 创建连接
let username = null; // 当前登录人姓名
let userId = null; //当亲登录人id
let toName = null; //消息接收人姓名
let toId = null;//消息接收人id
$(function() {
$(".bg_change_size").remove();
// 在ajax请求开始前将请求设为同步请求：$.ajaxSettings.async = false。
// 在ajax请求结束后不要忘了将请求设为异步请求，否则其他的ajax请求也都变成了同步请求 $.ajaxSettings.async = true。
$.ajax({
async: false,
type: 'GET',
url: "/index/getUsername",
success: function(res) {
if (!res.userId || !res.username) {
location.href = '/index/toIndex';
}
username = res.username;
userId = res.userId;
}
});
// 创建webSocket对象
createWebSocket();
// 发送消息到服务器
$(".sendMsg").on("click", function() {
sendMessage();
})
});
/**
* @title 创建连接
*/
function createWebSocket() {
try {
// 获取访问路径,带有端口号：ws://localhost/webSocket/001
let host = window.location.host;
// 创建WebSocket连接对象
webObj = new WebSocket(`ws://${host}/webSocket/${userId}`);
// 加载组件
initWsEventHandle();
} catch (e) {
ml.msgBox("连接出错，正在尝试重新连接，请稍等。。。");
// 尝试重新连接服务器
reconnect();
}
}
/**
* @title 初始化组件
*/
function initWsEventHandle() {
try {
// 建立连接
webObj.onOpen = function(evt) {
onWsOpen(evt);
// 建立连接之后，开始传输心跳包
heartCheck.start();
};
// 传送消息
webObj.onmessage = function(evt) {
// 发送消息
onWsMessage(evt);
// 接收消息后 也需要心跳包的传送
heartCheck.start();
};
// 关闭连接
webObj.onclose = function(evt) {
// 关闭连接，可能是异常关闭，需要重新连接
onWsClose(evt);
// 尝试重新连接
reconnect();
};
// 连接出错
webObj.onerror = function(evt) {
// 连接出错
onWsError(evt);
// 尝试重新连接
reconnect();
}
} catch (e) {
if (e) {
conlog("catch", e);
}
ml.msgBox("初始化组件失败，正在重试，请稍后。。。");
// 尝试重新创建连接
reconnect();
}
}
/**
* @title 建立连接
*/
function onWsOpen(e) {
if (e.data) {
conlog("onWsOpen", e.data);
}
ml.msgBox("建立连接成功。。。");
}
/**
* @title 传送消息内容
*/
function onWsMessage(e) {
if (e.data) {
conlog("onWsMessage", e.data);
}
let jsonStr = e.data;
//接收到服务器推送的消息后触发事件
message(e);
}
/**
* @title 关闭连接
*/
function onWsClose(e) {
if (e.data) {
conlog("onWsClose", e.data);
}
ml.msgBox("连接关闭，尝试重新连接服务器，请稍侯。。。");
closeFun(e);
}
/**
* @title 连接出错
*/
function onWsError(e) {
ml.msgBox("连接出错，正在尝试重新连接服务器，请稍侯。。。" + e.data);
}
/**
* @title 输出数据到控制台
*/
function conlog(msg) {
conlog('', msg);
}
/**
* @title 输出数据到控制台
*/
function conlog(title, msg) {
let content = msg;
if (title) {
content = `${title}：${msg}`;
}
console.log(`${content}`);
}
/**
* @title 异常处理
* @Desc 处理可以检测到的异常，并尝试重新连接
*/
function reconnect() {
if (lockReconnect) {
return;
}
conlog("reconnect");
ml.msgBox("正在尝试重新连接，请稍侯。。。");
lockReconnect = true;
// 没链接上会一直连接，设置延迟，避免过多请求
wsCreateHandler && clearTimeout(wsCreateHandler);
wsCreateHandler = setTimeout(function() {
ml.msgBox("正在重新连接。。。");
createWebSocket();
lockReconnect = false;
ml.msgBox("重连完成。。。");
}, 1000);
}
/**
* @title 心跳检测
* @Desc 网络中断，系统无法捕获，需要心跳检测实现重新连接
*/
var heartCheck = {
// 在15s内若没收到服务端消息，则认为连接断开，需要重新连接
timeout: 15000, // 心跳检测触发时间
timeoutObj: null,
serverTimeoutObj: null,
// 重新连接
reset: function() {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
this.start();
},
// 开启定时器
start: function() {
let self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function() {
ml.msgBox("发送ping到后台服务。。。");
try {
webObj.send("PING");
} catch (e) {
ml.msgBox("发送ping异常。。。");
}
//内嵌定时器
self.serverTimeoutObj = setTimeout(function() {
// 若onclose方法会执行reconnect方法，我们只需执行close()就行，
// 若直接执行reconnect会触发onclose导致重连两次
ml.msgBox("没有收到后台数据，关闭连接。。。");
webObj.close();
//reconnect();
}, self.timeout);
}, this.timeout);
}
};
/**
* @title 组织并解析数据
*/
function message(e) {
//获取服务端推送过来的消息
let message = e.data;
// 将message转为JSON对象
let res = JSON.parse(message);
// 是否为系统消息
if (res.systemMsgFlag) {
let allNames = res.message;
//1. 好友列表展示 2. 系统推广
let userListStr = "";
let broadcastListStr = "";
let imgUrl = "../imgs/chatIc.png";
for (let user of allNames) {
if (user.userId != userId) {
userListStr += `<li class="friend-li" οnclick='chatWith("${user.userId}","${user.username}",this);'><img src="${imgUrl}" class='friendList-img'><span>${user.username}</span></li>`;
broadcastListStr += `<li style='color:#9d9d9d;font-family:宋体;'>
<span style='font-size:5px;color:black;'>${user.dateStr}</span><br/>
好友<span>${user.username}</span>上线了!
</li>`;
}
}
$(".friend-list").html(userListStr);
$(".sys-msg").html(broadcastListStr);
} else {
// 不是系统消息
let msgText = res.message;
let msg = `<li class='friend-msg-li'><img src='${imgUrl}' class='img'/><span class='friend-span'>${msgText}</span></li>`;
if (toId === res.fromId) {
$(".chat-msg").append(msg);
}
let chatData = sessionStorage.getItem(res.fromId);
if (chatData) {
msg = chatData + msg;
}
sessionStorage.setItem(res.fromId, msg);
$(".chat-main")[0].scrollTop = $(".chat-main")[0].scrollHeight;
}
}
// 关闭连接
function closeFun(e) {
let tips = `<span style='font-size:5px;color:black;'>${new Date()}</span><br/>`;
$(".sys-msg").html(`${tips}用户：${username}<span style="float:right;color:red;">离开了</span>`);
}
// 选择好友
function chatWith(id, name, obj) {
toId = id;
toName = name;
$(".edit-msg").attr("disabled", false);
$(".div-btn").show();
$(".chat-msg").show();
$(obj).addClass("selected-li").siblings().removeClass("selected-li");
let chatNow = `正在和<span style="color: #db41ca;">${name}</span>聊天`;
$(".div-main-title").html(chatNow);
$(".chat-msg").html("");
var chatData = sessionStorage.getItem(toId);
if (chatData) {
//渲染聊天数据到聊天区
$(".chat-msg").html(chatData);
}
$(".chat-main")[0].scrollTop = $(".chat-main")[0].scrollHeight;
}
/**
* @title 组织和发送消息到服务器
*/
function sendMessage() {
// 发送消息
if (!toId || !toName) {
ml.tips("sendMsg", "请选择好友...");
return;
}
let msg = $(".edit-msg").val();
if (!msg) {
ml.tips("sendMsg", "请输入内容...");
return;
}
let img = `<img src='${imgUrl}' class='myself-img'/>`;
let li = $("<li class='myself-li'></li>");
li.html(`${img}<span class='myself-span'>${msg}</span>`);
$(".chat-msg").append(li);
$(".edit-msg").val('');
$(".chat-main")[0].scrollTop = $(".chat-main")[0].scrollHeight;
let chatData = sessionStorage.getItem(toId);
let liStr = `<li class='myself-li'>${img}<span class='myself-span'>${msg}</span></li>`;
if (chatData) {
liStr = chatData + liStr;
}
let jsonMessage = {
"fromName": username, //消息发送人姓名
"fromId": userId, //消息发送人id
"toName": toName, //消息接收人姓名
"toId": toId, //消息接收人id
"message": msg //发送的消息内容
};
// 将消息存放到sessionStorage中
sessionStorage.setItem(toId, liStr);
// 发送数据给服务器(消息发送格式为JSON格式)
webObj.send(JSON.stringify(jsonMessage));
}
ml.tips("sendMsg", "请输入内容...");
return;
}
let img = `<img src='${imgUrl}' class='myself-img'/>`;
let li = $("<li class='myself-li'></li>");
li.html(`${img}<span class='myself-span'>${msg}</span>`);
$(".chat-msg").append(li);
$(".edit-msg").val('');
$(".chat-main")[0].scrollTop = $(".chat-main")[0].scrollHeight;
let chatData = sessionStorage.getItem(toId);
let liStr = `<li class='myself-li'>${img}<span class='myself-span'>${msg}</span></li>`;
if (chatData) {
liStr = chatData + liStr;
}
let jsonMessage = {
"fromName": username, //消息发送人姓名
"fromId": userId, //消息发送人id
"toName": toName, //消息接收人姓名
"toId": toId, //消息接收人id
"message": msg //发送的消息内容
};
// 将消息存放到sessionStorage中
sessionStorage.setItem(toId, liStr);
// 发送数据给服务器(消息发送格式为JSON格式)
webObj.send(JSON.stringify(jsonMessage));
}
地址：https://blog.csdn.net/qq_51076413/article/details/124644500?spm=1001.2100.3001.7377&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-6-124644500-null-null.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-classify_tag-6-124644500-null-null.nonecase
加班万岁!
