thinkphp-wechat/public/page/js/wechat.js

var token = getUrlParam("token");

// 开启websocket
var webSocket = new WebSocket('ws://www.cimeisi.cn:8080?token=' + token);

// 流程跟服务端相同，监听握手成功，监听服务端发送消息，监听关闭，同时多了一个监听失败
webSocket.onopen = function (evt) {
    $.ajax({
        url: "http://www.cimeisi.cn:8080/index/user/info",
        data: {
            token : token
        },
        type: "POST",
        dataType: "json"
    }).then(function (response) {
        if (response.status == 200) {
            var friend_html = "";
            var content_html = "";
            $(".nickname").text(response.data.nickname);
            $(".own_numb").text("账号：" + response.data.account);
            $(".area").append(response.data.province + " " + response.data.city);

            // 加载好友列表
            for (var i in response.data.friend) {
                friend_html += i == 0 ? '<li class="user_active" data-id="' +response.data.friend[i].id + '">' : '<li data-id="' + response.data.friend[i].id + '">';
                friend_html +=     '<div class="user_head"><img src="images/head/2.jpg" /></div>';
                friend_html +=     '<div class="user_text">';
                friend_html +=         '<p class="user_name">' + response.data.friend[i].nickname + '</p>';
                friend_html +=         '<p class="user_message"></p>';
                friend_html +=     '</div>';
                friend_html +=     '<div class="user_time">刚刚</div>';
                friend_html += '</li>';

                content_html += i == 0 ?
                    '<ul class="content" id="content-' + response.data.friend[i].id + '">' :
                    '<ul class="content" id="content-' + response.data.friend[i].id + '">';
                content_html += '</ul>';
            }

            $(".user_list").html(friend_html);
            $(".user_list li").on("click", function () {
                var id = $(this).data("id");
                var nickname = $(this).children(".user_text").children(".user_name").text();
                $(this).addClass("user_active").siblings().removeClass("user_active");
                $(".windows_top_box").children("span").text(nickname);
                $("#content-" + id).show().siblings().hide();
            });
            $(".windows_body").children(".office_text").html(content_html);
            // 替换主聊天用户昵称
            $(".windows_top_box").children("span").text(response.data.friend[0].nickname);
        } else {
            alert(response.message);
        }
    });
};

webSocket.onmessage = function (evt) {
    var data = JSON.parse(evt.data);
    if (data.status == 200) {
        var message_html = "";
        var id = "";
        // 发送者
        if (data.data.type == 1) {
            message_html = '<li class="me"><img src="images/head/2.jpg" title="' + data.data.send_nickname + '"><span>' + data.data.message + '</span></li>';
            id = data.data.take_id;
            $("#input_box").val("");
        // 接收者
        } else if (data.data.type == 2) {
            message_html = '<li class="other"><img src="images/head/2.jpg" title="' + data.data.take_nickname + '"><span>' + data.data.message + '</span></li>';
            id = data.data.send_id;
        }

        var content_box = $("#content-" + id);
        content_box.append(message_html);
        content_box.scrollTop(content_box[0].scrollHeight);
    } else {
        alert(data.message);
    }
};

webSocket.onclose = function (evt) {
};

webSocket.onerror = function (evt, e) {
};

//底部扩展键
$(function() {
    $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
});

$(function(){
	$(".office_text").panel({iWheelStep:32});
});

//tab for three icon	
$(document).ready(function(){
  	$(".sidestrip_icon a").click(function(){
      $(".sidestrip_icon a").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
	  $(".middle").hide().eq($(this).index()).show();
    });

  	$("#input_box").focus(function(){
       $('.windows_input').css('background','#fff');
       $('#input_box').css('background','#fff');
   });
    $("#input_box").blur(function(){
       $('.windows_input').css('background','');
       $('#input_box').css('background','');
    });

    //三图标
    var si1 = $('#si_1');
    var si2 = $('#si_2');
    var si3 = $('#si_3');

    si1.click(function () {
        $(this).css("background", "url(images/icon/head_2_1.png) no-repeat");
        si2.css("background", "");
        si3.css("background", "");
    });

    si2.click(function () {
        $(this).css("background", "url(images/icon/head_3_1.png) no-repeat");
        si1.css("background", "");
        si3.css("background", "");
    });

    si3.click(function () {
        $(this).css("background", "url(images/icon/head_4_1.png) no-repeat");
        si1.css("background", "");
        si2.css("background", "");
    });

    $("#input_box").keydown(function (event) {
        if (event.altKey == true && event.keyCode == 83) {
            $("#send").trigger("click");
        }
    });

    $("#send").click(function() {
        var text = $("#input_box");
        var friend = $(".user_active").data("id");

        if (text.val() == "") {
            alert('不能发送空消息');
        } else {
            var data = {
                token : token,
                friend : friend,
                message : text.val()
            };
            webSocket.send(JSON.stringify(data));
        }
    });
});

function getUrlParam(name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象
     var r = window.location.search.substr(1).match(reg);//匹配目标参数
     if (r != null) return unescape(r[2]); return null;//返回参数值
 }