前端使用layui框架中的即时通讯
前端的一个代码测试
var uuid,username,head_pic,my_pic,my_name,my_id;
apiready = function() {
uuid = api.pageParam.uuid;
username = api.pageParam.username;
if(api.pageParam.head_pic ==''){
head_pic='../../image/moren.png';
}else{
head_pic = localhost+api.pageParam.head_pic;
}
api.ajax({
url: getUserInfoUrl,
method: 'post',
}, function(ret, err) {
// alert(JSON.stringify(ret));
if(ret){
if(ret.status == 1){
if(ret.result.head_pic){
my_pic = localhost+ret.result.head_pic;
}else{
my_pic = "../../image/moren.png"
}
if(ret.result.resume){
my_name = ret.result.resume.name;
}else{
my_name = ret.result.username;
}
my_id = ret.result.user_id;
chat();
}else{
}
}else{
alert(JSON.stringify(err));
}
})
}
function chat(){
// to_user=getUrlParam('');
layui.use('mobile', function(){
var mobile = layui.mobile
,layim = mobile.layim;
//基础配置
layim.config({
init: {//设置我的基础信息
mine: {
"username": my_name //我的昵称
,"id": my_id //我的ID
,"avatar": my_pic//我的头像
}
,friend: [] //见下文:init数据格式
}
,chatTitleColor: '#00c6c9'
//,uploadImage: { url:'',type: 'post'} //上传图片接口(返回的数据格式见下文)
,brief:false //是否简约模式,如果设为 true,则主面板不会显示。一般可用于客服
,maxLength:3000 //可允许的消息最大字符长度
,copyright: true //是否授权
,title: '我的消息'
,notice: true
,uploadImage: {url: 'http://106.41.79.178:7090/App/Chat/upload_image',type: 'post'}
,uploadFile: {url: 'http://106.41.79.178:7090/App/Chat/upload_file',type: 'post'}
});
//创建一个会话
layim.chat({
id: uuid
,name: username
,type: 'friend' //friend、group等字符,如果是group,则创建的是群聊
,avatar: head_pic
});
//02
// var wsUrl = CONST.imServerUrl;
// var sessionid = Math.random().toString(36).substr(2);
// var openid = "websiteTag-" + sessionid;
// var openidWrapper = WECHATFRIEND_ID_PREFIX + openid;
// var name = username+"-" + sessionid.substring(0,6);
// var avatar = "http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLz7QTEQJdoP6MKiaeC5MicQfwHhzFVXwDMXqJUL22WSlLDgEPgbxXMLpzx4psicTLt8wz37jp2tictew/132";
// var ws = wsUrl + "chatAPI/IMServer/" + openidWrapper+"/"+name+"/"+avatar;
// var socket = new WebSocket(ws);
const socket = new WebSocket('ws://localhost:8080');
//监听发送的消息
layim.on('sendMessage', function(data){
var content = data.mine.content;
var json = JSON.stringify({ //发送内容
action: 'chatMessage',
content: content,
to:data.to.id,
type: data.to.type
})
console.log('json:'+json);
socket.send(json);
});
socket.onopen = function(event) {
console.log("websocket连接成功");
};
//websocket断开连接
socket.onclose = function(event){
console.log("websocket断开连接");
}
//websocket出现异常
socket.onerror = function(event){
console.log("websocke出现异常");
$("#error").show();
}
//监听收到的聊天消息
socket.onmessage = function(event){
console.log(event.data);
var data = eval("("+event.data+")");
if (data.type === "ChatMessage") {//消息
layim.getMessage(data.data);
}else if (data.type === "UserSignChange") {//当前状态
offLine();
layerForm();
}
};
});
}
后端服务器添加 GatewayWorker文件,GatewayWorker基于Workerman开发的一个项目框架
GatewayWorker文件
GatewayWorker手册
主要的是修改 YourApp文件夹中的 start_businessworker.php start_gateway.php start_register.php 这三个文件的服务器地址