HTML5 做聊天,用环信SDK做聊天的服务器，用户注册登录成功与添加好友（一）

最新推荐文章于 2024-04-20 20:30:09 发布

Meng_fengyang

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量6.9k

点赞数 1

分类专栏： HTML5 文章标签： html5 聊天

本文链接：https://blog.csdn.net/meng_fengyang/article/details/51494423

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用环信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>

Meng_fengyang

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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"
复制链接

扫一扫