初识websocket

Posted 2020-12-30 苡米阳光

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识websocket相关的知识，希望对你有一定的参考价值。

即时通讯

说白了就是

建立连接/收消息/发消息

但是细究还有好多好多,学无止境啊

下面是一个简单的demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
        <title></title>
        <link rel="stylesheet" href="css/base.css" />
        <script type="text/javascript" src="js/websocket.js"></script>
    </head>

    <body>
        <div class="wrap">
            <div class="sideleft">
                <h1>在线人员</h1>
                <ul>
                    <li>
                        <div class="headimg"></div>
                        <span>18768875722</span>
                    </li>
                    <li>
                        <div class="headimg"></div>
                        <span>15277365552</span>
                    </li>
                </ul>
            </div>
            <div class="sideright">
                <div id="liao">
                    <div>
                        <div class="headimg"></div>
                        <div class="aaa">你好,B先生</div>
                    </div>
                    <div style="float: right;">
                        <div class="bbb" id="me">比分和健康</div>
                        <div class="headimg"></div>
                    </div>
                </div>
                <div class="connect">
                    <div>
                        <input type="text" style="height: 40px;width: 180px;" id="content" />
                    </div>
                    <div>
                        <input type="text" id="num" style="position: absolute;bottom: 10px;right: 140px;" />
                        <button class="dl" onclick="connect()">登录</button>
                        <button class="ql" onclick="send()">群聊</button>
                        <button class="sl">私聊</button>
                    </div>
                </div>
            </div>

            <!--<div id="logs"></div>-->

        </div>
        <script>
        </script>
    </body>

</html>

界面如下

下面是websocket的代码,所能实现的效果就是,先用账号登录,然后就开启群聊或者私聊

var curUser, username, socket;

function connect() {
    username = document.getElementById("num").value;
    if(curUser) {
        alert("当前已登录,请先退出登录!");
        return;
    }

　　//改为你需要的IP

　　var ip = "106.00.0.000";

    var port = 8888;
    var password = "123";
　　socket = new WebSocket("ws:" + ip + ":" + port + "?username=" + username + "&password=" + password);
    socket.onopen = function(e) {
        console.log("登陆成功");
        var userCmd = "{\\"cmd\\":17,\\"type\\":\\"0\\",\\"userid\\":\\"" + username + "\\"}";
        socket.send(userCmd); //获取登录用户信息;
    };
    socket.onerror = function(e) {
        console.log("登录异常");
        console.log(e.message)
    };
    socket.onmessage = function(e){
       var data = eval("("+e.data+")");
        var contentdata = eval("("+data.data+")");
        //接收消息触发
        if(data.command == "COMMAND_CHAT_RESP" & contentdata.from != username){
            console.log("接收成功");
            document.getElementById("liao").innerHTML += " <br/><div><div class=\'headimg\'></div><div class=\'aaa\'>"+contentdata.content+"</div></div>";
    
        }
    }

}

var onSelected;
//发送消息
function send() {
    var toId = "";
    if(onSelected) {
        toId = "1876887572210";
    }
    var createTime = new Date().getTime();
    var content = document.getElementById(\'content\').value;
    if(content == "")
        return;
//群聊代码
    var msg = "{\\"from\\": \\""+username+"\\",\\"createTime\\":"+createTime+",\\"cmd\\":11,\\"group_id\\":\\"100\\",\\"chatType\\":\\"1\\",\\"msgType\\":\\"text\\",\\"content\\": \\""+content+"\\"}";
//私聊代码
//var msg = "{\\"from\\": \\"" + username + "\\",\\"to\\": \\"" + toId + "\\",\\"cmd\\":11,\\"createTime\\":" + createTime + ",\\"msgType\\": \\"text\\",\\"content\\": \\"" + inputValue + "\\"}",

socket.send(msg);
    var chatObj = eval("(" + msg + ")");
    console.log(chatObj);
    //document.getElementById("me").innerHTML = chatObj.content;
    document.getElementById("liao").innerHTML += " <br/><div style=\'float: right;\'><div class=\'bbb\' id=\'me\'>"+chatObj.content+"</div><div class=\'headimg\'></div></div>";
    var createTime = "2017-10-20";
    document.getElementById(\'content\').value = "";
}

以上是关于初识websocket的主要内容，如果未能解决你的问题，请参考以下文章