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, 开始编写网页：
<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>