WebSocket聊天客户端

最新推荐文章于 2025-05-13 00:52:11 发布

主沉浮

最新推荐文章于 2025-05-13 00:52:11 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： C# 文章标签： webSocket聊天 js聊天

本文链接：https://blog.csdn.net/u010773333/article/details/50766694

C# 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个基于WebSocket技术的即时聊天应用实现方法。通过检测浏览器是否支持WebSocket，并根据不同情况选择合适的WebSocket实例进行创建，实现了与服务器的实时通信。此外，还介绍了如何在页面加载时进行初始化设置，以及用户发送消息的具体流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要在微信里面做一个视频谈论区，想把视频固定在页面上不移动，只让连天记录滚动，

下面介绍一下即时聊天的一个websocket实现方法

加载页面时需要先准备

$(document).ready(function () {
            $("#SendDataContainer").hide();
            var WebSocketsExist = true;
            try {
                var dummy = new WebSocket("ws://localhost:8989/test");
            } catch (ex) {
                try
                {
                   webSocket = new MozWebSocket("ws://localhost:8989/test");
                }
                catch(ex)
                {
                   WebSocketsExist = false;
                }
            }

            if (WebSocketsExist) {
                Log("您的浏览器支持WebSocket. 您可以尝试连接到聊天服务器!", "OK");
                document.getElementById("Connection").value = "192.168.3.91:4141/chat";
            } else {
                Log("您的浏览器不支持WebSocket。请选择其他的浏览器再尝试连接服务器。", "ERROR");
                document.getElementById("ToggleConnection").disabled = true;
            }

执行文本加载准备事件

之后

点击链接实现

if ("WebSocket" in window) {
                       ws = new WebSocket("ws://" + document.getElementById("Connection").value);
                    }
                    else if("MozWebSocket" in window) {
                       ws = new MozWebSocket("ws://" + document.getElementById("Connection").value);
                    }

                    SocketCreated = true;
                    isUserloggedout = false;

发送信息

ws.send("login:" + document.getElementById("txtName").value);

ws.send(document.getElementById("txtName").value + "说 :\"" + document.getElementById("DataToSend").value + "\"");