初识websocket

时间：2018-08-16 15:45:43 阅读：165 评论：0 收藏：0 [点我收藏+]

标签：sheet osi NPU 账号登录 lin height com name 分享

即时通讯

说白了就是

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

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

下面是一个简单的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

标签：sheet osi NPU 账号登录 lin height com name 分享

原文地址：https://www.cnblogs.com/yourself/p/9487446.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行