用Websocket聊天完整demo，做笔记用，各位大佬多多指教

最新推荐文章于 2022-04-19 16:44:54 发布
村里为你写代码的
最新推荐文章于 2022-04-19 16:44:54 发布
阅读量584
点赞数
分类专栏：前端文章标签： jquery
本文链接：https://blog.csdn.net/ta1594184/article/details/107842476
版权
本文详细记录了使用WebSocket技术构建一个实时聊天应用的过程，包括前端与后端的交互，以及jQuery库的应用。通过这个实战项目，读者可以了解WebSocket的基本用法及其在实际开发中的应用。
摘要由CSDN通过智能技术生成
//企业端
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200806160850444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhMTU5NDE4NA==,size_16,color_FFFFFF,t_70#pic_center)

<html>



<head>

    <title>直聊</title>

    <meta http-equiv="Content-Type" content="text/html;  charset=gb2312" />

    <meta name="author" content="https://blog.csdn.net/q475254344">

    <link href="../css/chat.css" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
        integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    <script src="../js/jquery.min.js"></script>

    <script src="../js/core.ajaxpanel.js"></script>//图片上传插件js文件
    <script src="../js/commonURL.js" type="text/javascript" charset="gb2312"></script> //动态拼接域名
    <script src="../js/jform.js"></script>//wuyong

</head>

<style>
    #ajaxForm {
   

        height: 55px;

    }

    #images_text {
   

        max-width: 75px;

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        margin: auto;

        max-height: 150px;

        padding-left: 10px;

    }



    .overlay {
   

        display: block;

        position: absolute;

        top: 0%;

        left: 0%;

        width: 100%;

        height: 100%;

        background-color: black;

        z-index: 9998;

        -moz-opacity: 0.8;

        opacity: 1;

        filter: alpha(opacity=20);

    }



    .overlay_none {
   

        display: none;

    }



    .max_imgs {
   

        max-width: 800px;

        max-height: 800px;

        position: fixed;

        left: 25%;

        top: 5%;





    }

    .linkman {
   
        padding: 0 5px 0 7px;

    }
</style>



<body class="box">

    <div class="overlay_none" id="overlay" onclick="imgageNone()">

        <input type="text" class="identification" value="1" style="display: none;" />

        <img class="max_imgs" src="http://api.qyxdrc.com/storage/chatimg/qNQA8rGikHXhPIKKwBBIpVyhhyGLkruebzH0McLi.jpeg"
            alt="">

    </div>

    <div class="container">

        <div class="chatbox">

            <div class="chatleft">

                <div class="top">

                    <!-- <i class="fas fa-bars" style="font-size: 1.4em"></i> -->

                    <!-- <input type="text" placeholder="search" style="width: 140px; height: 36px; margin-left: 25px;"> -->

                    <!-- <button class="searchbtn"></style><i class="fas fa-search"></i></button> -->

                    <div style="font-size: 14px;display: flex;align-items: center;">
                        <image style="width: 20px;height: 20px;"
                            src="https://api.qyxdrc.com/storage/mini_img/tubiaos/zaixian.png" mode="aspectFill" /> <span
                            class="linkman">0</span>个联系人
                    </div>


                </div>

                <div class="center_in">

                    <ul class="center_ul">



                    </ul>

                </div>

            </div>

            <div class="chatright">

                <div class="top infolist">

                    <img style="border-radius: 20px; vertical-align: middle;width: 40px;height: 40px;" class="logo_img"
                        src="">

                    <span style="margin-left: 20px;" class="logo_text"></span>

                    <i class="fas fa-ellipsis-v"
                        style="font-size: 1.4em; position: absolute; right: 20px; color: gray;cursor: pointer;"
                        onclick="showHide()"></i>
                    <input type="text" id="showHide" value="1" style="display: none;">

                </div>
                <div class="position_josv">
                    <span> 沟通职位 </span> <span class="name_in"> 未填 </span> <span style="padding: 0 2px;"
                        class="money_num">未知 </span> <span class="region"></span>
                </div>
                <div class="center">

                    <ul class="msgleft_ul">

                        <!-- 聊天记录 -->

                    </ul>

                </div>

                <div class="top_info">

                    <div class="function_list">

                        <a href="javascript:void(0)" title="常用语"><img src="../images/chang.png" alt=""
                                class="function_img" id="function_img" onclick="setLongTerm()"></a>

                        <a href="javascript:void(0)" title="交换手机号"><img src="../images/phone.png" alt=""
                                class="function_img" onclick="getPhone()"></a>

                        <a href="javascript:void(0)" title="交换微信号"><img src="../images/wechat.png" alt=""
                                class="function_img" onclick="getWeChat()"></a>

                        <a href="javascript:void(0)" title="面试邀请"><img src="../images/mianshi.png" alt=""
                                class="function_img" id="btn"></a>

                        <a href="javascript:void(0)" title="创建多人视频面试房间"><img src="../images/remote.png" alt=""
                                class="function_img" id="video" onclick="manyVideo()"></a>

                        <a href="javascript:void(0)" title="AI面试"><img src="../images/aivideo.png" alt=""
                                class="function_img" id="video" onclick="aIVideoS()"></a>

                        <a href="javascript:void(0)" title="短信通知"><img src="../images/duanxin.png" alt=""
                                class="function_img" onclick="setBote()"></a>

                        <form id="ajaxForm" method="post" enctype="multipart/form-data">

                            <label for="file" class="cursor-pointer" style="height: 80px;">

                                　<img class="function_img" title="发送图片" style="cursor: pointer;"
                                    src="../images/tupian.png">

                            </label>

                            <input type="file" id="file" name="chatimg" class="dn" style="display: none;" />

                        </form>
                        <a href="javascript:void(0)" title="更换职位"><img src="../images/zhiweijiaohuan.png" alt=""
                                class="function_img" onclick="updateInformation()"></a>
                        <a href="javascript:void(0)" title="发送office"><img src="../images/offer1.png" alt=""
                                class="function_img" onclick="officeMation()"></a>

                    </div>

                    <input type="text" class="biaoshi" value="1" style="display: none;" />

                    <div class="long_term" id="hide">



                    </div>

                </div>

                <div class="footer">

                    <textarea id="textarea_messge" maxlength="800" rows="5" cols="40"
                        style="width: 100%; resize: none; border: none;height:75%; padding-left: 15px;padding-right: -20px;"
                        placeholder="请在此输入要发送的内容..." onfocus="textareaFocus()"></textarea>

                    <button onclick="myFunction()" class="sendbtn">发送</button>



                </div>

            </div>

            <div class="chatrihtml">

                <div class="logo_imagers">

                    <img class="logo_img"
                        src="http://api.qyxdrc.com/storage/avatar/vBV8wCaxIyFcJN9mwABBAyjHH2cZnYgoaAXWhltC.jpeg"
                        style="width: 60px;height: 60px;border-radius: 50%;">

                    <span class="companyname">无</span>

                </div>

                <div class="hiring">

                    <span class="expectation">招聘岗位:</span>

                    <span class="jobs_name">无</span>

                </div>

                <div class="welfare_conditions">



                </div>

                <div class="responsibility">

                    <span class="responsibility_title">岗位职责:</span>

                    <text class="responsibility_text" class="" selectable="false" space="false" decode="false">

                        无

                    </text>

                </div>

                <div class="communication_date">

                    <span class="responsibility_date" style="padding-right: 15px;">04月29日 10:
                        24</span><span>由你发起了沟通</span>

                </div>

            </div>

        </div>

    </div>

    <div id="choiceWindow">

        <label id="x" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label>

        <div class="innerbodywrapper" style="margin-bottom: 10px">

            <b style="line-height: 40px; font-size: 18px;">发送面试邀请</b>

            <div class="form-item">

                <div id="tag" class="form-tab-wrap">

                    <div class="text_interview">

                        <i>*</i><span>面试职位: </span>

                        <div class="select">

                            <select id="position" onchange="positionData()">

                                <option value="">请选择</option>

                            </select>

                        </div>

                    </div>

                    <div class="text_interview">

                        <i>*</i><span>面试时间: </span>

                        <input type="datetime-local" id="jobtoptime" />

                    </div>

                    <div class="text_interview">

                        <i>*</i><span>面试地点: </span>

                        <input type="text" id="site" />

                    </div>

                    <div class="text_interview">

                        <i>*</i><span>联系人: </span>

                        <input type="text" id="linkman" />

                    </div>

                    <div class="text_interview">

                        <i>*</i><span>联系电话: </span>

                        <input type="text" id="telephone_in" />

                    </div>

                </div>

            </div>

        </div>

        <div class="form-item tc" style="text-align: center;">

            <input type="submit" name="" value="发送" onclick="subSave()" class="form-submit-primary" />

        </div>

    </div>
    <div id="informationWindow">

        <div style="position: relative;height: 100%;">
            <image id="shut" src="./../images/sss.png"
                style="width: 20px;height: 20px;position: absolute;top:10px;left: 95%;font-size: 25px;" />
            <div class="innerbodywrapper" style="margin-bottom: 10px">

                <b style="line-height: 40px; font-size: 18px;">更换职位</b>

                <div class="form-item">
                    <div class="information">

                    </div>


                </div>

            </div>

            <div class="form-item tc" style="text-align: center;padding-top: 30px;">

                <input type="submit" name="" value="更改" onclick="informationSave(this)" class="form-submit-primary" />

            </div>
        </div>

    </div>
    <div id="officeWindow">

        <!-- <label id="of" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label> -->
        <image id="of" src="./../images/sss.png"
            style="width: 20px;height: 20px;position: absolute;top:10px;left: 95%;font-size: 25px;" />
        <div class="innerbodywrapper" style="margin-bottom: 10px">

            <b style="line-height: 40px; font-size: 18px;">发送office邀请</b>

            <div class="form-item">

                <div id="tag" class="form-tab-wrap">

                    <div class="text_interview">

                        <span>入职职位: </span>

                        <input type="text" id="induction_jobsOffice" disabled />
                        <input type="text" id="induction_id" style="display: none;">
                    </div>

                    <div class="text_interview">

                        <span>入职时间: </span>

                        <input type="datetime-local" id="induction_jobtoptime" />

                    </div>

                    <div class="text_interview">

                        <span>入职地点: </span>

                        <input type="text" id="induction_site" disabled />

                    </div>

                    <div class="text_interview">

                        <span>联系人: </span>

                        <input type="text" id="induction_linkman" disabled />

                    </div>

                    <div class="text_interview">

                        <span>联系电话: </span>

                        <input type="text" id="induction_telephone_in" disabled />

                    </div>

                </div>

            </div>

        </div>

        <div class="form-item tc" style="text-align: center;">

            <input type="submit" name="" value="发送" onclick="sending()" class="form-submit-primary" />

        </div>

    </div>
    <div id="particulars">

        <image id="ofin" src="./../images/sss.png"
            style="width: 20px;height: 20px;position: absolute;top:10px;left: 95%;font-size: 25px;" />
        <div class="innerbodywrapper" style="margin-bottom: 10px">

            <b style="line-height: 40px; font-size: 18px;">发送offer邀请</b>

            <div class="form-item">
                <div style="width: 100%;display: flex;justify-content: center;">
                    <div class="particulars_box">
                        <div class="particulars_img">
                            <image style="width: 100px;height: 100px;border-radius: 50%;margin-bottom: 20px;"
                                class="particulars_logo" src="../images/20200612144226.jpg" />
                            <span class="particulars_logo_name">清远兄弟人才科技公司</span>
                        </div>
                        <div class="particulars_text">
                            <div style="font-size: 14px;">
                                <span>尊敬的</span><span class="particulars_name">xxx</span>
                            </div>
                            <div class="particulars_pc">
                                <text class="" selectable="false" space="false" decode="false">非常荣幸地通知您,您已被我司正式录用,任
                                    <span class="particulars_josb">xxxx</span> 一职。真诚欢迎您的加入,祝您在我司工作愉快! 入职地点: <span
                                        class="particulars_address" style="color: #62d5c8;padding: 0 10px;"></span>
                                </text>
                            </div>
                            <div class="particulars_company">
                                <span class="company_name">清远兄弟人才科技公司</span>
                                <span class="the_time">2020.06.11</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</body>

<script>

    var id

    var fromuid

    var websocket

    var resume_id

    var arr

    var dataLIst

    var phoneIndex

    var wxIndex

    var token_type = localStorage.getItem("token_type");

    var access_token = localStorage.getItem("access_token");

    $(function () {
   

        //get传输

        function getUrlParam(name) {
   

            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

            var r = window.location.search.substr(1).match(reg);

            if (r != null) return decodeURI(r[2]);

            return null;

        }

        fromuid = localStorage.getItem("uid")

        utype = localStorage.getItem("utype")

        //console.log(fromuid);

        id = getUrlParam('id');

        resume_id = getUrlParam('resume_uid');

        //console.log(resume_id);



        websocket = new WebSocket("后台接口");//长链接接口，有新消息会自动获取
			


        if (utype == 2) {
   

            alert('当前身份是个人身份，请切换企业身份')

            window.opener = null;

            window.open('', '_self');

            window.close();

        }

        //连接关闭的回调方法

        websocket.onopen = function () {
   



            sendSocketMessage('登陆', 'login')

        }

        // //连接关闭的回调方法

        // websocket.onclose = function () {
   

        //     setMessageInnerHTML("WebSocket连接关闭");

        // }

        setMessageInnerHTML()

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

        window.onbeforeunload = function () {
   

            closeWebSocket();

        }

        //关闭WebSocket连接

        function closeWebSocket() {
   

            websocket.close();

        }

        liebiao()

        getData()

        Chatlist()

        positionList()

        AccesswxNumber()

        if (dataLIst.length != 0) {
   

            $(".center").animate({
    scrollTop: $(".msgleft_ul li:last").offset().top }, 1000);

        }

        if (token_type == 'Bearer') {
   



        } else {
   

            alert('请先登陆')

            window.opener = null;

            window.open('', '_self');

            window.close();

        }

        // }

        if (fromuid == id) {
   

            alert('请不要和自己聊天')

            window.opener = null;

            window.open('', '_self');

            window.close();

        }

        if (dataLIst.length != 0) {
   

            //console.log("聊过了")

        } else {
   

            setTimeout(function () {
   

                text_in()

            }, 1000)

        }

        AccessPhone()

    })

    $("textarea").each(function (index) {
   
        $("textarea")[index].addEventListener('keydown', function (e) {
   
            if (e.keyCode != 13) {
   
                return;
            } else {
   //当按键输入为回车时，执行下列操作
                myFunction()
                event.preventDefault();//为了兼容IE8
                e.returnValue = false;
                e = $(this).val() + '\n';//手动增加换行符
                $(this).val(e).focus();//定义焦点还是在这个控件上
            }
        });
    });

    //常用语

    function setLongTerm() {
   

        var val = $('.biaoshi').val()

        if (val == 1) {
   

            $('.long_term').attr('id', 'show')

            $('.biaoshi').val('2')

            $(".long_term").empty();

            $('#function_img').attr('src', '../images/lchang.png')

            arr = [

                '很高兴收到您的应聘消息，可以聊聊吗？',

                '我可以看看您的简历吗？',

                '您之前是否有与我们这个职位相关的工作经验呢？',

                '可以说说您的期望薪资吗？您很符合我们的要求',

                '我们公司目前正在快速发展，前景非常不错'

            ]

            for (const key in arr) {
   

                html = ''

                html += '<span οnclick="setTerm(' + key + ')">' + arr[key] + '</span><br/>'

                $('.long_term')