github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/message/message_friends.html (about)

     1  <!doctype html>
     2  <html>
     3  <head>
     4  <meta charset="UTF-8">
     5  <meta name="copyright" content="www.apicloud.com" />
     6  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
     7  <title>好友消息</title>
     8  <link rel="stylesheet" type="text/css" href="../../css/app_common.css" />
     9  <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    10  <link rel="stylesheet" type="text/css" href="../../css/idangerous.swiper.css">
    11  <style type="text/css">
    12  	.unread {
    13  		display: inline-block;
    14  		background: #15b5e9;
    15  		color: #fff;
    16  		font-size: 10px;
    17  		padding: 0 3px;
    18  		border-radius: 10px;
    19  		-webkit-border-radius: 10px;
    20  	}
    21  </style>
    22  </head>
    23  
    24  <body>
    25  
    26  
    27  <!--D:\srccode\zuohaoshi\client\demo\wangyimusic20141207\html\third_frame\frame0301.html-->
    28  
    29  <div class="sectionTitle mt20" id="data_div"></div>
    30  
    31  <script id="mytpl" type="text/x-dot-template">
    32  {{ if(it && it.length > 0){ }}
    33  	{{ for(var i=0;i<it.length;i++){ }}	
    34  
    35  		<div class="egret-flex-item"  tapmode="fmbtnhover" onclick="openMessageDetail('{{=it[i].id}}','{{=it[i].name}}')">
    36  			<div class="egret-flex-item-logo">
    37  				<img src="../../image/test/frame0103cover07.jpg" alt="" class="">
    38  			</div>
    39  			<div class="egret-flex-item-shelf">
    40  				{{ if(it[i].name){ }}
    41  				<div class="egret-flex-item-shelf01">{{=it[i].id}} phone:{{=it[i].name}}</div>
    42  				{{ }else{ }}
    43  				<div class="egret-flex-item-shelf01">无名</div>
    44  				{{ } }}
    45  				
    46  				{{ if(it[i].content){ }}
    47  				<div class="egret-flex-item-shelf02"><span class="egret-flex-item-redclassify">好人</span>{{=it[i].content}}</div>
    48  				{{ }else{ }}
    49  				<div class="egret-flex-item-shelf02"><span class="egret-flex-item-redclassify">好人</span>抬头看天，低头看地，平头看人！</div>
    50  				{{ } }}
    51  			</div>
    52  		</div>
    53  		
    54  	{{ } }}
    55  	
    56  {{ }else{ }}
    57  	<li>没有数据</li>
    58  {{ } }}
    59  </script>
    60  
    61  <script type="text/javascript" src="../../script/api.js"></script>
    62  <script type="text/javascript" src="../../script/idangerous.swiper.js"></script>
    63  <script type="text/javascript" src="../../script/doT.min.js" charset="utf-8"></script>
    64  <script type="text/javascript" src="../../script/app.js"></script>
    65  <script type="text/javascript" src="../../script/socket.io.js"></script>
    66  <!--<script type="text/javascript" src="widget://script/socket.io.js"></script> -->
    67  
    68  <script type="text/javascript" charset="utf-8">
    69  </script>
    70  
    71  <script type="text/javascript">
    72  
    73  isFirst = false;
    74  	
    75  function openMessageDetail(user_id, user_name) {
    76  	// 获取目标ID
    77  	var targetId = user_id; //$(this).attr("data-targetId");
    78  	// 获取目标名称
    79  	var targetName = user_name; //$(this).attr("data-targetName");
    80  	
    81  	// 清除未读数
    82  	//rong_clearMessagesUnreadStatus(conversationType, targetId);
    83  	// 打开会话页面
    84      api.openWin({
    85          name: "chat_win",
    86          url: "chat_win.html",
    87          pageParam: {conversationType: "chat", targetId : targetId, targetName : targetName}
    88      });
    89      
    90      console.log("open message detail:" + user_id + " name: " + user_name);
    91  	//alert("应该跳转到Message页面  id " + user_id);
    92  	
    93  	/*
    94  	var socket = new WebSocket('ws://123.56.159.76:3000');
    95  	socket.onopen = function(event){
    96  		socket.send('I am the client and I\'m listening!');
    97  		alert("websocket is good");
    98  	}
    99  	socket.onmessage = function(event){
   100  		console.log('Client received a message',event);
   101  	}
   102  	socket.onclose = function(event){
   103  		console.log('Client notified socket has closed',event);
   104  	}
   105  	//socket.close()
   106  	console.log("websocket is " + socket);*/
   107  
   108  	
   109  	//alert("websocket is good2");
   110  	
   111  	/*winName = grouptype + "_" + type + "_detail"
   112  	winUrl = winName + "_win.html"
   113      api.openWin({
   114          name: winName,
   115          url: winUrl,
   116          pageParam: {dataId: did}
   117      });*/
   118  }
   119  
   120  var headerPos;
   121  
   122  window.onload = function() {
   123  }
   124  
   125  // 初始化并连接监听
   126  function websocket_init() {
   127  	user_id = $api.getStorage("user_id");
   128  	
   129  	this.socket = io.connect('ws://123.56.159.76:3000');
   130  	this.socket.emit('login', {userid:user_id, username:'jincm111'});
   131  	
   132  	
   133  	//连接后，server会将对应的信息立即发送过来
   134  	this.socket.on("msg_server", function(msg, fn) {
   135  		fn('rcv_ok');
   136  		//io.emit('rcv_ok', { my: 'data' });
   137  		console.log(JSON.stringify(msg));
   138  		// 4.1 广播接收到消息了(消息可能包含多条？)
   139  		_sendEvent("receivedMsg", msg);
   140  		// 判断是否首次获取，避免重复插入
   141  		if (!isFirst) {
   142  			// 发送者ID
   143  			var senderUserId = msg.senderUserId;
   144  			// 判断是否是单聊
   145  			if (msg.conversationType == "PRIVATE") {
   146  				senderUserId = msg.senderUserId;
   147  			}
   148  			// 判断是否是群聊
   149  			else if (msg.conversationType == "GROUP") {
   150  				senderUserId = msg.targetId;
   151  			}
   152  			//将新的消息数据保存到本地，然后每个消息页面重新加载即可；
   153  			//save msgs 
   154  			//showMsgList();
   155  		}
   156  		if (!isFirst) {
   157  			// 状态栏提醒
   158  			api.notification({
   159  				vibrate : [300, 500],
   160  				sound : 'default',
   161  				light : false,
   162  				notify : {
   163  					title : '您有新消息',
   164  					content : msg.content != undefined ? msg.content : "",
   165  					updateCurrent : false,
   166  					extra : JSON.stringify(msg)
   167  				}
   168  			}, function(ret, err) {
   169  			});
   170  		}		
   171  	});
   172  	
   173  	/*this.socket.on('send_ok', function(data) {
   174  		console.log("msg send " + data);
   175  		// 广播消息，发送成功
   176  		_sendEvent("sendMsgSuccess", data);		
   177  	});*/
   178  	
   179  	this.socket.on('disconnect', function () {
   180      	//io.emit('user disconnected');
   181    	});
   182  }
   183  
   184  /*
   185  // 退出登录
   186  function websocket_logout(ret) {
   187  	websocket_disconnect();
   188  }
   189  // 断开连接
   190  function websocket_disconnect() {
   191  	websocket.disconnect(false);
   192  }*/
   193  
   194  // 统一发送消息接口
   195  // @msgType：消息类型，文字，图片，语言，地图，天气
   196  // @conversationType：会话类型，单聊（PRIVATE），讨论组（DISCUSSION），群组（GROUP），聊天室（CHATROOM），客服（CUSTOMER_SERVICE），（SYSTEM）
   197  // @targetId：接受方ID，可以是用户 Id、讨论组 Id、群组 Id 或聊天室 Id
   198  // @content：发送内容
   199  // @extra：用户自定义数据,一般extra是用户+token组装的json字符串
   200  //function websocket_sendMsg(msgType, conversationType, senderId, targetId, content, extra)
   201  function websocket_sendMsg(msg) {
   202  	switch(msg.msgType) {
   203  		// 发送文字消息(目前仅支持文字，图片声音视频后续支持）
   204  		case "TxtMsg":
   205  			// 存储当前发送信息到本地
   206  			//$api.setStorage((ret.result.message.messageId).toString(), ret);
   207  			// 广播消息，发送准备中			
   208  			//extra = JSON.stringify({'username':'jincm','bb':'cc'});
   209  			
   210  			//var msg = {'content':{'text':content,'extra':extra}, 'objectName':"RC:TxtMsg","messageId":targetId};
   211  			msg.msgId = _uuid();
   212  			
   213  			console.log("msg is :" + JSON.stringify(msg));
   214  			
   215  			//var sendmsg = {'value':msg};
   216  			_sendEvent("sendMsgPrepare", msg);
   217  			this.socket.emit("msg_client", msg , function (result) {
   218  				console.log("msg client result is " + result);
   219  				// 广播消息，发送成功
   220  				_sendEvent("sendMsgSuccess", msg);	
   221  			});
   222  
   223  			
   224  			// 设置发送会话
   225  			//sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   226  					
   227  			/*websocket.sendTextMessage({
   228  				conversationType : conversationType,
   229  				targetId : targetId,
   230  				text : content,
   231  				extra : extra
   232  			}, function(ret, err) {
   233  				if (ret.status == 'prepare') {
   234  					// 存储当前发送信息
   235  					$api.setStorage((ret.result.message.messageId).toString(), ret);
   236  					// 广播消息，发送准备中
   237  					_sendEvent("sendMsgPrepare", ret.result.message);
   238  				} else if (ret.status == 'success') {
   239  					// 广播消息，发送成功
   240  					_sendEvent("sendMsgSuccess", ret.result.message);
   241  					// 设置发送会话
   242  					sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   243  				} else if (ret.status == 'error') {
   244  					// 广播消息，发送失败
   245  					_sendEvent("sendMsgError", {
   246  						errcode : err.code,
   247  						messageId : ret.result.message.messageId
   248  					});
   249  				}
   250  			});*/
   251  			break;
   252  		// 发送语音
   253  		case "VcMsg":
   254  			websocket.sendVoiceMessage({
   255  				conversationType : conversationType,
   256  				targetId : targetId,
   257  				voicePath : content,
   258  				duration : $api.strToJson(extra).duration,
   259  				extra : extra
   260  			}, function(ret, err) {
   261  				if (ret.status == 'prepare') {
   262  					// 存储当前发送信息
   263  					$api.setStorage((ret.result.message.messageId).toString(), ret);
   264  					// 广播消息，发送准备中
   265  					_sendEvent("sendMsgPrepare", ret.result.message);
   266  				} else if (ret.status == 'success') {
   267  					// 广播消息，发送成功
   268  					_sendEvent("sendMsgSuccess", ret.result.message);
   269  					// 设置发送会话
   270  					sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   271  				} else if (ret.status == 'error') {
   272  					// 广播消息，发送失败
   273  					_sendEvent("sendMsgError", {
   274  						errcode : err.code,
   275  						messageId : ret.result.message.messageId
   276  					});
   277  				}
   278  			});
   279  			break;
   280  		// 发送图片
   281  		case "ImgMsg":
   282  			websocket.sendImageMessage({
   283  				conversationType : conversationType,
   284  				targetId : targetId,
   285  				imagePath : content,
   286  				extra : extra
   287  			}, function(ret, err) {
   288  				if (ret.status == 'prepare') {
   289  					// 存储当前发送信息
   290  					$api.setStorage((ret.result.message.messageId).toString(), ret);
   291  					// 广播消息，发送准备中
   292  					_sendEvent("sendMsgPrepare", ret.result.message);
   293  				} else if (ret.status == 'progress') {
   294  					// 广播消息，发送过程中
   295  					_sendEvent("sendMsgProgress", ret.result.progress);
   296  				} else if (ret.status == 'success') {
   297  					// 广播消息，发送成功
   298  					_sendEvent("sendMsgSuccess", ret.result.message);
   299  					// 设置发送会话
   300  					sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   301  				} else if (ret.status == 'error') {
   302  					// 广播消息，发送失败
   303  					_sendEvent("sendMsgError", {
   304  						errcode : err.code,
   305  						messageId : ret.result.message.messageId
   306  					});
   307  				}
   308  			});
   309  			break;
   310  		// 发送图文
   311  		case "richmsg":
   312  			websocket.sendRichContentMessage({
   313  				conversationType : conversationType,
   314  				targetId : targetId,
   315  				title : $api.strToJson(extra).title,
   316  				description : $api.strToJson(extra).description,
   317  				imageUrl : content,
   318  				extra : extra
   319  			}, function(ret, err) {
   320  				if (ret.status == 'prepare') {
   321  					// 存储当前发送信息
   322  					$api.setStorage((ret.result.message.messageId).toString(), ret);
   323  					// 广播消息，发送准备中
   324  					_sendEvent("sendMsgPrepare", ret.result.message);
   325  				} else if (ret.status == 'success') {
   326  					// 广播消息，发送成功
   327  					_sendEvent("sendMsgSuccess", ret.result.message);
   328  					// 设置发送会话
   329  					sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   330  				} else if (ret.status == 'error') {
   331  					// 广播消息，发送失败
   332  					_sendEvent("sendMsgError", {
   333  						errcode : err.code,
   334  						messageId : ret.result.message.messageId
   335  					});
   336  				}
   337  			});
   338  			break;
   339  		// 发送位置信息
   340  		case "location":
   341  			websocket.sendLocationMessage({
   342  				conversationType : conversationType,
   343  				targetId : targetId,
   344  				latitude : $api.strToJson(extra).lat,
   345  				longitude : $api.strToJson(extra).lon,
   346  				poi : $api.strToJson(extra).poi,
   347  				imagePath : content,
   348  				extra : extra
   349  			}, function(ret, err) {
   350  				if (ret.status == 'prepare') {
   351  					// 存储当前发送信息
   352  					$api.setStorage((ret.result.message.messageId).toString(), ret);
   353  					// 广播消息，发送准备中
   354  					_sendEvent("sendMsgPrepare", ret.result.message);
   355  				} else if (ret.status == 'progress') {
   356  					// 广播消息，发送过程中
   357  					_sendEvent("sendMsgProgress", ret.result.progress);
   358  				} else if (ret.status == 'success') {
   359  					// 广播消息，发送成功
   360  					_sendEvent("sendMsgSuccess", ret.result.message);
   361  					// 设置发送会话
   362  					sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   363  				} else if (ret.status == 'error') {
   364  					// 广播消息，发送失败
   365  					_sendEvent("sendMsgError", {
   366  						errcode : err.code,
   367  						messageId : ret.result.message.messageId
   368  					});
   369  				}
   370  			});
   371  			break;
   372  		// 发送命令消息（自定义消息)
   373  		case "cmd":
   374  			websocket.sendCommandNotificationMessage({
   375  				conversationType : conversationType,
   376  				targetId : targetId,
   377  				name : $api.strToJson(extra).name,
   378  				data : extra
   379  			}, function(ret, err) {
   380  				if (ret.status == 'prepare') {
   381  					// 存储当前发送信息
   382  					$api.setStorage((ret.result.message.messageId).toString(), ret);
   383  					// 广播消息，发送准备中
   384  					_sendEvent("sendMsgPrepare", ret.result.message);
   385  				} else if (ret.status == 'success') {
   386  					// 广播消息，发送成功
   387  					_sendEvent("sendMsgSuccess", ret.result.message);
   388  					// 设置发送会话
   389  					sendMsgSuccessEnd($api.getStorage((ret.result.message.messageId).toString()));
   390  				} else if (ret.status == 'error') {
   391  					// 广播消息，发送失败
   392  					_sendEvent("sendMsgError", {
   393  						errcode : err.code,
   394  						messageId : ret.result.message.messageId
   395  					});
   396  				}
   397  			});
   398  			break;
   399  		default:
   400  			break;
   401  	}
   402  }
   403  		
   404  // 获取会话列表
   405  function websocket_getConversationList(ret) {
   406  	showMsgList();
   407  }
   408  
   409  apiready = function  () {
   410  	console.log("come setFrameGroupIndex:win name:" + api.winName + " framename:" + api.frameName);
   411  	user_id = $api.getStorage("user_id");
   412  	
   413  	//获取数据
   414  	function showMsgList(){
   415  		isFirst = false;
   416  		//get message
   417  		//get token and userid,if token is null,redirect to login
   418  		
   419  		//token = $api.getStorage("token");
   420  		url = "/u/" + "/users/search?loc_x=116&loc_y=40"
   421  		myajax(url,'GET','', function(ret,err){
   422  			console.log("ret body = " + JSON.stringify(ret.body));
   423  			//alert(JSON.stringify(ret.body));
   424  		
   425  			if(ret){
   426  				console.log(JSON.stringify(ret.body))
   427  				//get data from server								
   428  				var obj = new Array();
   429  				
   430  				for(var i = 0; i < ret.body.users.length; i++) {
   431  					console.log(ret.body.users[i]._id);
   432  					console.log(ret.body.users[i].account);
   433  					obj.push({"id":ret.body.users[i]._id,"name":ret.body.users[i].account,"content":ret.body.users[i].account});
   434  				}
   435  				/*obj = [ {"id":"123451","name":"user1","content":"user1 is a good man"},
   436  								{"id":"123452","name":"user2","content":"user2 is a good man"},
   437  								{"id":"123453","name":"user3","content":"user3 is a good man"},
   438  								{"id":"123454","name":"user4","content":"user4 is a good man"},
   439  								{"id":"123455","name":"user5","content":"user5 is a good man"},
   440  								{"id":"123456","name":"user6","content":"user6 is a good man"},
   441  								{"id":"123457","name":"user7","content":"user7 is a good man"},
   442  								{"id":"123458","name":"user8","content":"user8 is a good man"},
   443  								{"id":"123459","name":"user9","content":"user9 is a good man"},
   444  								{"id":"123460","name":"user10","content":"user10 is a good man"},
   445  								{"id":"123461","name":"user11","content":"user11 is a good man"},
   446  								{"id":"123462","name":"user12","content":"user12 is a good man"} ];*/
   447  			
   448  			    var data_div = $api.byId('data_div');
   449  			    var tpl = $api.byId('mytpl').text;
   450  			    var tempFn = doT.template(tpl);
   451  			    data_div.innerHTML = tempFn(obj);
   452  		    }else {
   453  		    	api.alert({
   454  		        	msg:('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode)
   455  		    	});
   456  		    }
   457  		});
   458  	}
   459  	
   460  	// 结合下拉刷新
   461  	api.setRefreshHeaderInfo({
   462  	        visible: true,
   463  	        loadingImg: 'widget://image/near/refresh.png',
   464  	        bgColor: '#ccc',
   465  	        textColor: '#fff',
   466  	        textDown: '下拉刷新...',
   467  	        textUp: '松开刷新...',
   468  	        showTime: true
   469  	}, function(ret, err){
   470  	        showMsgList(); // 第一次加载
   471  	        api.refreshHeaderLoadDone();
   472  	});
   473  
   474  	// 8.0 初始化并连接
   475  	websocket_init();
   476  	// 19、自动下拉加载	
   477  	// 默认第一次打开页面就下拉加载数据
   478  	api.refreshHeaderLoading();
   479  
   480  	// 15 获取用户信息
   481  	userJson = user_id; //$api.getStorage("user_id");
   482  	// 9.0 监听是否需要发送消息
   483  	_addEventListener("sendMsgStart", function(ret) {
   484  		if (ret && ret.value) {
   485  			var msg = ret.value;
   486  			// 调用统一接口发送信息
   487  			console.log("sendMsgStart 2............");
   488  			websocket_sendMsg(msg);
   489  		}
   490  	});
   491  	
   492  	// 监听是否退出登录
   493  	_addEventListener("logOut", function(ret) {
   494  		websocket_logout();
   495  	});
   496  			
   497  }
   498  </script>
   499  </html>