原生 websocket

2022-03-22 03:06:21
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<script>
    var toName;
    var username;
    function showChat(name){
        toName = name;
        // 显示聊天对话框
        $(‘#chatArea‘).css("display", "inline");
        // 显示正在和谁聊天
        $(‘#chatMes‘).html("正在和<span>toName</span>聊天")
    }

    $(function () {
        $.ajax({
            url: ‘getUsername‘,
            success: function (res) {
                username = res;
                $("#username").html("用户：" + res + "<span style=‘color: green‘>在线</span>")
            },
            async: false   // 必须同步
        })

        // 创建webSocket对象
        var ws = new WebSocket("ws://localhost/chat");

        // 给ws绑定事件
        ws.onopen = function () {
            // 在建立连接后需要做什么事？
            // 显示在线信息
            $(‘#userName‘).html("用户：" + username + "<span>在线</span>")
        }

        // 接收到服务端推送的消息后触发
        ws.onmessage = function (evt) {
            // 获取服务端推送过来的消息
            var dataStr = evt.data;

            // 将dataStr 转化为json对象
            var res = JSON.parse(dataStr);

            // 判断是否是系统消息
            if(res.isSystem){
                // 系统消息

            } else {
                // 不是系统消息

            }
        }

        ws.onclose = function () {
            // 显示离线信息
            $(‘#userName‘).html("用户：" + username + "<span>离线</span>")
        }

        $(‘#submit‘).click(function () {
            // 获取输入的内容
            var data = $(‘#context_text‘).val();

            // 清除输入区的内容
            $(‘#context_text‘).val("");

            var json = {"toName": toName, "message": data}

            // 发送数据给服务端
            ws.send(JSON.stringify(json))
        })


    })



</script>

</body>
</html>
原生 websocket
码农公寓

相关文章
