即时通讯

前端使用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 这三个文件的服务器地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值