Communicate .Net Core & Vue.js Using

In systems where long processes are running in the back, there are situations where the user needs to be informed about the process on the front side due to user experience. For example, let’s consider the pipeline on Jenkins. There is a deploy process in the backend and the user needs to learn at what stage the process is, at which stage the error was received, or about how long the process is left to finish.

Jenkins Pipeline

In order to create a user-friendly screen during such long-lasting and gradual processes, the user should be able to follow the process live without having to refresh the screen. In this article, I will explain how a multi-stage process running on .Net Core interacts with on the Vue frontend.

Simple Server

Let’s create an entry-level server that already has many examples on the internet. In order not to get a CORS error, let’s specify the port where our C# project will run and the port where the Vue project will run as in the example.

We need a 3-layer structure for the information we want to send to the SocketIO server and from there to Vue via the backend. At this point, we need 2 emit events to provide transitions between them.

We will use the information about the process we get from the “fromProcess” emit event and to send it to Vue, we will use the “toClient” emit event. These servers, the information to be sent by the .Net Core will be captured by the server and directed to the client.

Socket.IO C# Client

Although Socket.IO does not have a C# Client officially supported, the Socket.IO-client for .NET project, which is a nice project on this subject, successfully meets this problem.

In this article, I wrote a code that will send the process information to the SocketIO server every 2 seconds to keep the code phase as simple as possible. The first parameter of the “EmitAsync” method shows the name of the emit event and the second shows the data we will send.

Vue SocketIO

I preferred to use the VueSocketIOExtended project to enable interaction between Vue and SocketIO server. I will not talk about the installation phase because the documentation is very simple and beautiful.

After creating a component, I specified the action to be done as a result of the connect emit event under the sockets field provided by this package and the action to be taken when the “toClient” emit event is received. Since the information from .Net Core reaches the SocketIO server and comes to the Vue Client under the name of “toClient” emit event, we do the operation we want to do under this method. Here, for the simplest example, I assigned the incoming data to a variable to print it on the screen.


Vue Client Demo For Staged Processes

As a result of this 3-layer structure, we have implemented the interaction between the backend and the frontend in the simplest way possible via web-sockets instead of providing http requests.

Thank you for reading, I hope it was helpful.




Frontend Developer |

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Working with dates, some things I learned so far.

Universal Android WebView App Source Code

Introduction to Backend as a Service (BaaS)

KWOC ’20 | Report

The best way of setting up Zoom inside your Angular app

Dynamic Allocation of Objects Quiz

DevOps and Hybrid Cloud: What and How?

JSON and the Argonauts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Erdem Gonul

Erdem Gonul

Frontend Developer |

More from Medium

Update: Vue 3 Components in ASP.NET Core using vue3-sfc-loader

Adding React to (a legacy) ASP .NET MVC project

Easily Use a JavaScript Control in a Blazor Server App

Easily Use a JavaScript Control in a Blazor Server App

View Components in ASP.NET Core