{"id":15092252,"url":"https://github.com/lostbeard/spawndev.blazorjs.socketio","last_synced_at":"2025-07-28T08:41:31.280Z","repository":{"id":247778509,"uuid":"826302030","full_name":"LostBeard/SpawnDev.BlazorJS.SocketIO","owner":"LostBeard","description":"Socket.IO bidirectional and low-latency communication for every platform, in Blazor WebAssembly","archived":false,"fork":false,"pushed_at":"2024-12-04T23:42:18.000Z","size":221,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-27T23:43:57.238Z","etag":null,"topics":["blazor","blazor-webassembly","dotnet","webbrowser","websocket"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LostBeard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-09T12:49:55.000Z","updated_at":"2025-04-04T13:05:46.000Z","dependencies_parsed_at":"2024-07-21T17:31:09.037Z","dependency_job_id":"7aa3a64e-8989-4a02-b9f6-b9900453e82a","html_url":"https://github.com/LostBeard/SpawnDev.BlazorJS.SocketIO","commit_stats":null,"previous_names":["lostbeard/spawndev.blazorjs.socketio"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LostBeard/SpawnDev.BlazorJS.SocketIO","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.SocketIO","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.SocketIO/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.SocketIO/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.SocketIO/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LostBeard","download_url":"https://codeload.github.com/LostBeard/SpawnDev.BlazorJS.SocketIO/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LostBeard%2FSpawnDev.BlazorJS.SocketIO/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267487102,"owners_count":24095551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-webassembly","dotnet","webbrowser","websocket"],"created_at":"2024-09-25T11:01:14.761Z","updated_at":"2025-07-28T08:41:31.213Z","avatar_url":"https://github.com/LostBeard.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SpawnDev.BlazorJS.SocketIO\nBidirectional and low-latency communication for every platform.\n\n[![NuGet version](https://badge.fury.io/nu/SpawnDev.BlazorJS.SocketIO.svg?label=SpawnDev.BlazorJS.SocketIO)](https://www.nuget.org/packages/SpawnDev.BlazorJS.SocketIO)\n\n**SpawnDev.BlazorJS.SocketIO** brings the amazing [socket.io](https://github.com/socketio/socket.io) library to Blazor WebAssembly.\n\n**SpawnDev.BlazorJS.SocketIO** uses [SpawnDev.BlazorJS](https://github.com/LostBeard/SpawnDev.BlazorJS) for Javascript interop allowing strongly typed, full access to the [socket.io](https://github.com/socket.io/socket.io) Javascript library. \n\n## Setup\n**Create a new Blazor WebAssembly Standalone App**  \nIn the folder you created for your new project:\n```dotnet\ndotnet new blazorwasm\n```\n\n**Add the Nuget package**  \n```dotnet\ndotnet add package SpawnDev.BlazorJS.SocketIO\n```\n\n**Add BlazorJSRuntime service**  \nAdd to `Program.cs`\n```cs\nbuilder.Services.AddBlazorJSRuntime();\n```\n\n**Add SocketIO Javascript Library**  \nAdd to `index.html`  \n```html\n\u003cscript src=\"_content/SpawnDev.BlazorJS.SocketIO/socket.io.min.js\"\u003e\u003c/script\u003e\n```\n(Alternatively `await Socket.Init()` can be used in C# to load the SocketIO library at runtime)  \n\n**Create a Socket**\n```cs\nvar socket = new Socket(socketIoServerUrl);\n```\n\n## Shared Counter example from repo\nIn this example, when any user changes the counter value by clicking the button all users see the value change.\n\nProgram.cs\n```cs\nusing Microsoft.AspNetCore.Components.Web;\nusing Microsoft.AspNetCore.Components.WebAssembly.Hosting;\nusing SpawnDev.BlazorJS;\nusing SpawnDev.BlazorJS.SocketIO;\nusing SpawnDev.BlazorJS.SocketIO.Demo;\n\nvar builder = WebAssemblyHostBuilder.CreateDefault(args);\nbuilder.RootComponents.Add\u003cApp\u003e(\"#app\");\nbuilder.RootComponents.Add\u003cHeadOutlet\u003e(\"head::after\");\n\n// init SpawnDev.BlazorJS.BlazorJSRuntime service\nbuilder.Services.AddBlazorJSRuntime();\n\n// Load the Socket.IO Javascript library. Can be loaded using a \u003cscript\u003e tag in the index.html instead\nawait Socket.Init();\n// A Socket can be created when needed.\n// Here we are creating a socket.io Socket at startup and registering it as a service\n// below tells the socket the uri of our socketio-demo-server\nvar socket = new Socket(\"http://localhost:3000\");\nbuilder.Services.AddSingleton(socket);\n// example of listening for a message on a Socket\nsocket.On\u003cstring\u003e(\"welcome\", welcomeMessage =\u003e\n{\n    Console.WriteLine($\"Welcome received: {welcomeMessage}\");\n});\n\nawait builder.Build().RunAsync();\n\n```\n\nCounter.razor\n```cs\n@page \"/counter\"\n@inject Socket Socket\n@implements IDisposable\n\n\u003cPageTitle\u003eShared Counter\u003c/PageTitle\u003e\n\n\u003ch1\u003eShared Counter\u003c/h1\u003e\n\n\u003cp role=\"status\"\u003eCurrent count: @currentCount\u003c/p\u003e\n\u003cp role=\"status\"\u003eChanged by: @countChangedBy\u003c/p\u003e\n\n\u003cbutton disabled=\"@Socket.Disconnected\" class=\"btn btn-primary\" @onclick=\"IncrementCount\"\u003eClick me\u003c/button\u003e\n\n@code {\n    private int currentCount = 0;\n    private string countChangedBy = \"\";\n\n    private void IncrementCount()\n    {\n        Socket.Emit(\"incrementCount\");\n    }\n    protected override void OnInitialized()\n    {\n        Socket.OnConnect += Socket_OnConnect;\n        Socket.OnDisconnect += Socket_OnDisconnect;\n        Socket.On\u003cstring, int\u003e(\"countChanged\", Socket_OnCountChanged);\n        _ = TryUpdateCount();\n    }\n    void Socket_OnCountChanged(string changedBy, int newValue)\n    {\n        currentCount = newValue;\n        countChangedBy = changedBy;\n        StateHasChanged();\n    }\n    async Task TryUpdateCount()\n    {\n        if (!Socket.Connected) return;\n        try\n        {\n            (countChangedBy, currentCount) = await Socket.EmitWithAck\u003c(string, int)\u003e(\"getCount\");\n            StateHasChanged();\n        }\n        catch { }\n    }\n    void Socket_OnConnect()\n    {\n        _ = TryUpdateCount();\n    }\n    void Socket_OnDisconnect()\n    {\n        StateHasChanged();\n    }\n    public void Dispose()\n    {\n        Socket.OnConnect -= Socket_OnConnect;\n        Socket.OnDisconnect -= Socket_OnDisconnect;\n        Socket.Off\u003cstring, int\u003e(\"countChanged\", Socket_OnCountChanged);\n    }\n}\n```\n\n### The NodeJS Socket.IO server (socketio-demo-server)\n**app.js**  \n```js\nconst { createServer } = require(\"http\");\nconst { Server } = require(\"socket.io\");\n\nconst httpServer = createServer();\nconst io = new Server(httpServer, {\n    // options\n    cors: { origin: '*', },\n});\nconst port = 3000;\n\nlet currentCount = 0;\nlet countChangedBy = \"\";\n\nio.on(\"connection\", (socket) =\u003e {\n    console.log(\"socket connection\", socket.id);\n    // send a welcome message\n    socket.emit(\"welcome\", `Welcome to my server! ${socket.id}`);\n    // listen for disconnect\n    socket.on(\"disconnect\", () =\u003e {\n        console.log(\"socket disconnect\", socket.id);\n    });\n    socket.on(\"incrementCount\", () =\u003e {\n        // request to increase count\n        // increase and notify all sockets\n        currentCount++;\n        countChangedBy = socket.id;\n        // notify all sockets\n        io.emit(\"countChanged\", countChangedBy, currentCount);\n    });\n    socket.on(\"getCount\", (callback) =\u003e {\n        // request for current count\n        callback([countChangedBy, currentCount]);\n    });\n    // listen for events messages\n    socket.on(\"getWeather\", function (callback) {\n        console.log(\"socket getWeather\", socket.id);\n        var weather = [\n            {\n                \"date\": \"2022-01-06\",\n                \"temperatureC\": 1,\n                \"summary\": \"Freezing\"\n            },\n            {\n                \"date\": \"2022-01-07\",\n                \"temperatureC\": 14,\n                \"summary\": \"Bracing\"\n            },\n            {\n                \"date\": \"2022-01-08\",\n                \"temperatureC\": -13,\n                \"summary\": \"Freezing\"\n            },\n            {\n                \"date\": \"2022-01-09\",\n                \"temperatureC\": -16,\n                \"summary\": \"Balmy\"\n            },\n            {\n                \"date\": \"2022-01-10\",\n                \"temperatureC\": -2,\n                \"summary\": \"Chilly\"\n            }\n        ];\n        callback(weather);\n    });\n});\n\n// listen\nhttpServer.listen(port, function () {\n    console.log(`Listening on port ${port}`);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostbeard%2Fspawndev.blazorjs.socketio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flostbeard%2Fspawndev.blazorjs.socketio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostbeard%2Fspawndev.blazorjs.socketio/lists"}