C# AJAX如何结合WebSocket实现即时通讯

发布时间：2024-09-09 16:55:48 作者：小樊
来源：亿速云阅读：82

在C#中，我们可以使用ASP.NET Core来实现WebSocket和AJAX的结合，从而实现即时通讯。以下是一个简单的示例：

首先，创建一个ASP.NET Core Web应用程序，并安装Microsoft.AspNetCore.WebSockets包。
在Startup.cs文件中，配置WebSocket中间件：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // ...
    app.UseWebSockets();
    app.Use(async (context, next) =>
    {
        if (context.Request.Path == "/ws")
        {
            if (context.WebSockets.IsWebSocketRequest)
            {
                var webSocket = await context.WebSockets.AcceptWebSocketAsync();
                await Echo(context, webSocket);
            }
            else
            {
                context.Response.StatusCode = 400;
            }
        }
        else
        {
            await next();
        }
    });
    // ...
}

private async Task Echo(HttpContext context, WebSocket webSocket)
{
    var buffer = new byte[1024 * 4];
    var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
    while (!result.CloseStatus.HasValue)
    {
        await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count), result.MessageType, result.EndOfMessage, CancellationToken.None);
        result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
    }
    await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}

创建一个HTML页面，用于与服务器进行WebSocket通信：

<!DOCTYPE html>
<html>
<head>
   <title>WebSocket Demo</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
   <input type="text" id="message" placeholder="Type a message...">
   <button id="send">Send</button>
    <ul id="messages"></ul>

   <script>
        $(function () {
            var socket = new WebSocket('ws://localhost:5000/ws');
            socket.onopen = function (event) {
                console.log('WebSocket connection opened:', event);
            };

            socket.onmessage = function (event) {
                $('#messages').append($('<li>').text('Received: ' + event.data));
            };

            socket.onclose = function (event) {
                console.log('WebSocket connection closed:', event);
            };

            $('#send').click(function () {
                var message = $('#message').val();
                socket.send(message);
                $('#messages').append($('<li>').text('Sent: ' + message));
                $('#message').val('');
            });
        });
    </script>
</body>
</html>

在HTML页面中，我们使用jQuery库来处理AJAX请求。当用户点击“发送”按钮时，将触发AJAX请求，将消息发送到服务器。服务器通过WebSocket将消息广播给所有连接的客户端。

这个示例展示了如何在C#中使用ASP.NET Core、WebSocket和AJAX实现即时通讯。你可以根据自己的需求对其进行扩展和优化。

C# AJAX如何结合WebSocket实现即时通讯

相关阅读