HTML5 做聊天,用环信SDK做聊天的服务器，用户注册登录成功与添加好友（一）
使用环信SDK 做聊天项目服务器；
1，在android 项目中 做HTML5的聊天模块
2，用HBuilder 软件 import 原来的Ecplice 做的android 项目，在HBuilder中 新建web项目（WWW项目），把新建的web项目放到android的assets文件中.
3，引入 js与css 库。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/webim.css" />
<script src="sdk/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/strophe.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/easemob.im-1.0.7.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/easemob.im.config.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>4，修改easemob.im.config.js 的appkey值，这个是自己在环信网站创建项目时，生成的key
5, 开始编写网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/webim.css" />
<script src="sdk/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/strophe.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/easemob.im-1.0.7.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/easemob.im.config.js" type="text/javascript" charset="utf-8"></script>
<script src="sdk/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> //连接环信服务器 var connnection; $(document).ready(load); function load() { connnection = new Easemob.im.Connection(); //通过json直接创建对象，每个属性结束用逗号 var options = { url: Easemob.im.config.xmppURL, onOpened: function() { console.log("登录成功"); $("#loginProgressModal").modal("hide"); $("#myfriend-modal").modal("show"); }, onError: function(msg) { console.log(showObjectInfo(msg)); }, }; //初始化connnection connnection.init(options); //事件绑定 通过id绑定事件， show是让界面显示，hide 是隐藏。 // $("#registerBtn").click(regiseter); //显示login modal $("#login-modal").modal("show"); $("#toRegisterBtn").click(function() { $("#login-modal").modal("hide"); $("#register-modal").modal("show"); }); $("#toLoginBtn").click(function() { $("#register-modal").modal("hide"); $("#login-modal").modal("show"); }); $("#loginBtn").click(login); $("#addFriendBtn").click(addFriend); } //用户注册函数 function regiseter() { var username = $("#register-username").val(); username = $.trim(username); var password = $("#register-password").val(); password = $.trim(password); var nickname = $("#register-nickname").val(); nickname = $.trim(nickname); if (username == "" || password == "" || nickname == "") { window.alert("用户名，密码，呢称不能为空"); return; } //提交给服务器的注册信息 var options = { appKey: Easemob.im.config.appkey, username: username, password: password, nickname: nickname, success: function(registerResult) { console.log("注册成功" + registerResult); alert("注册成功"); }, error: function(errorInfo) { console.log("注册失败" + showObjectInfo(errorInfo)); alert("注册失败"); }, }; //执行环信sdk中的注册方法 Easemob.im.Helper.registerUser(options); } //显示对象中每个属性和属性的值 function showObjectInfo(object) { var string = ""; for (var fieldName in object) { string = string + fieldName + ":" + object[fieldName] + "\n"; } return string; } //用户登录函数 function login() { var username = $("#login-username").val(); var password = $("#login-password").val(); username = $.trim(username); password = $.trim(password); $("#login-modal").modal("hide"); $("#loginProgressModal").modal("show"); //发给服务器的登录信息 var loginInfo = { appKey: Easemob.im.config.appkey, user: username, pwd: password, }; //执行登录 connnection.open(loginInfo); } //显示添加好友界面函数 function showAddFriendModal() { $("#addFriend-modal").modal("show"); } //添加好友函数 function addFriend() { //从view接收好友名字，消息 var friendUsername=$("#addFriend-username").val(); var msg=$("#addFriend-message").val(); if (friendUsername=="") { window.alert("好友名字不能为空"); } if (msg=="" || msg==null) { msg="想加你为好友"; } //创建options var addFriendInfo={ to:friendUsername, message:msg, } //发给环信服务器 connnection.subscribe(addFriendInfo); } </script>
</head>
<body>
<!--登录界面-->
<div id="login-modal" class="modal hide">
<div class="modal-header">
<h4>登录</h4></div>
<div class="modal-body">
<table>
<tr>
<td>用户名</td>
<td><input id="login-username" value="1" /></td>
</tr>
<tr>
<td>密码</td>
<td><input id="login-password" value="1" type="password" /></td>
</tr>
</table>
</div>
<div class="modal-footer">
<input type="button" class="btn" id="loginBtn" value="登录">
<input type="button" class="btn" id="toRegisterBtn" value="注册" />
</div>
</div>
<!--注册界面-->
<div id="register-modal" class="modal hide">
<div class="modal-header">
<h4>注册</h4></div>
<div class="modal-body">
<table>
<tr>
<td>用户名</td>
<td><input id="register-username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input id="register-password" /></td>
</tr>
<tr>
<td>呢称</td>
<td><input id="register-nickname" /></td>
</tr>
</table>
</div>
<div class="modal-footer">
<input type="button" class="btn" id="registerBtn" value="注册">
<input type="button" class="btn" id="toLoginBtn" value="登录" />
</div>
</div>
<!--登录进度界面-->
<div id="loginProgressModal" class="modal hide">
<div class="wait-login">
<img src="img/waitting.gif" /> 正在努力登录......
</div>
</div>
<!--登录之后的显示我的好友界面-->
<div id="myfriend-modal" class="modal hide">
<div class="modal-header">
<span>我的好友</span>
<span style="float: right;">
<div class="dropdown">
<button style="margin-right: 100px;" data-toggle="dropdown">添加</button>
<ul class="dropdown-menu">
<li><a href="javascript:;" onclick="showAddFriendModal()">添加好友</a></li>
<li><a>删除好友</a></li>
<li><a>退出</a></li>
</ul>
</div>
</span>
</div>
<div class="modal-body"></div>
</div>
<!--添加好友界面-->
<div id="addFriend-modal" class="modal hide">
<div class="modal-header">
<h4>添加好友</h4>
</div>
<div class="modal-body">
好友名称：<input id="addFriend-username" />
<br/> 消息：
<input id="addFriend-message" />
</div>
<div class="modal-footer">
<button id="addFriendBtn" class="btn btn-success">添加</button>
<button class="btn btn-warning" data-dismiss="modal">取消</button>
</div>
</div>
</body>
</html>