Let's see how to build a simple chat-room using Vue.Js and why Vue.js is awesome.
Vue.Js is awesome. I've used other JavaScript libs throughout the years and as a long time Scrum master and developer, I use to do a technical retrospective after each project. In my experience, when compared to Vue.Js, other libs are heavy, slow or over-complicated. Just do a quick search to learn why people love it.
On this post, I want to demo how elegant and simple Vue is so I built a very simple chat room frontend using Vue.js, Bootstrap and a few CDNs. You can find the source code here. It's one simple html page. Just download and open in your browser.
The source code
You can find the code for a simple chat room below. A little more then 30 lines of code to build this frontend. Wow, that's efficiency.Posting Messages to the Room
Of course, we would like to send messages to the chat room. It's as simple as running the code below on your Developer Tools (F12) console:
app.messages.push({name: 'Some Name', msg: 'Test123', tm: (new Date()).toLocaleTimeString(), color: 'red'});
See that new messages are auto-added to the room on the bottom with very little effort. Simple, clean, elegant.
Future Enhancements
Out of the box, the code above simulates a chat room frontend for just one user. Yes you can still hack it trough the console to add other users (by pushing to the participants array) but it's not usable yet. One interesting exercise would be enhancing the above code with WebSockets so that multiple users can connect at the same room and chat trough it.I already have that code written in SignalR Core and a ASP.NET Core web app as the backend and will soon open source it. Stay tuned.
Source Code
Vue did all the work. All the rest is available on my GitHub.See Also
- Microservices in ASP.NET
- My journey to 1 million articles read
- Building a dynamic table with Vue.Js and Bootstrap 4
- Testing JavaScript on ASP.NET Core Applications
- JavaScript caching best practices with Asp.Net
- Copying data to memory with JavaScript and jQuery
- Why use Fedora Linux
- 5 tools for Azure Development on Linux
- Windows Subsystem for Linux, the best way to learn Linux on Windows
- Why use .NET Core
- Copying data between Azure databases in 3 easy steps