Web Socket Background.js 示例 - C#

简介

Web Socket是HTML5提供的一种新协议，它是从ws://或wss://协议开始的双向通讯信道。通过它，浏览器可以和服务器进行全双工通讯，从而实现了实时性更高的交互。Background.js是Chrome扩展程序中一个非常重要的文件，用于定义事件响应函数，包括页面加载、插件更新等等。

本文将基于C#语言，提供一个Web Socket Background.js的示例，帮助开发者快速实现Web Socket长连接。

环境准备

• C# IDE（如Visual Studio）
• Chrome浏览器

实现过程

1. 编写Background.js

在Chrome扩展程序工作目录下创建Background.js文件，该文件内容如下：

var ws;
function Connect() {
    ws = new WebSocket("ws://localhost:8000");
    ws.onopen = function() {
        console.log("Web Socket connected.");
    }
    ws.onmessage = function(evt) {
        console.log("Received message: " + evt.data);
    }
    ws.onclose = function() {
        console.log("Web Socket closed.");
        setTimeout(Connect, 1000);
    }
}
Connect();

上述代码创建了一个作为全局变量的WebSocket对象，然后定义了一个“Connect()”函数。在该函数中，创建由“ws://localhost:8000”定义的Web Socket连接。在成功连接后，输出一个log记录。当收到返回消息时，也输出一个log记录。当连接关闭时，等待1000毫秒后重新连接。

2. 编写Web Socket服务端程序

C#语言可以通过WebSocketListener类快速搭建Web Socket服务端。创建一个C#控制台程序，然后使用如下代码片段完成服务端程序：

using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

namespace WebSocketServer
{
    class Program
    {
        static async Task RunAsync()
        {
            using (var listener = new HttpListener())
            {
                listener.Prefixes.Add("http://localhost:8000/");
                listener.Start();
                Console.WriteLine("Listening...");

                while (true)
                {
                    var context = await listener.GetContextAsync();
                    if (!context.Request.IsWebSocketRequest) {
                        context.Response.StatusCode = 400;
                        context.Response.Close();
                        continue;
                    }

                    var socket = await context.AcceptWebSocketAsync(null);

                    var buffer = new ArraySegment<byte>(new byte[1024]);
                    var result = await socket.ReceiveAsync(buffer, CancellationToken.None);
                    while (!result.CloseStatus.HasValue)
                    {
                        var responseMessage = Encoding.UTF8.GetBytes("Message received.");
                        await socket.SendAsync(new ArraySegment<byte>(responseMessage), result.MessageType, result.EndOfMessage, CancellationToken.None);
                        buffer = new ArraySegment<byte>(new byte[1024]);
                        result = await socket.ReceiveAsync(buffer, CancellationToken.None);
                    }

                    await socket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
                }
            }
        }
    }
}

首先，引用需要的命名空间，然后创建一个名为“RunAsync”的异步方法。在该方法中，创建一个HttpListener对象，该对象绑定“http://localhost:8000/”地址，并开始监听。当新请求到达时，检查是否是WebSocket请求。如果不是，返回400状态码。否则，接受WebSocket对象并接收客户端发送的消息。如果无关闭状态，就向客户端发送确认消息，并最终关闭连接。

3. 测试

运行Web Socket服务端程序，然后在Chrome浏览器中打开扩展程序，观察控制台输出信息。当与WebSocket连接成功时，将输出一条“Web Socket connected.”消息。当服务端发送数据时，将输出一条“Received message: Message received.”消息，表明客户端可以接收从服务端发送的消息。

总结

本文中，我们介绍了如何在Chrome扩展程序中使用Web Socket长连接。通过C#语言实现了Web Socket服务端程序，并且通过WebSocketListener类快速搭建。我们还编写了Chrome扩展程序中的Background.js文件，实现了Web Socket连接，同时也介绍了服务端向客户端发送数据的过程。