Try LogRocket for free:
In this tutorial, we’re going to explore web browser based gaming using Vue.js, but we’re going to include sockets through Socket.io for a multiplayer perspective.
0:00 Introduction
0:42 Setting up your server components in Vue
7:27 Setting up Vue.js
9:31 Renaming files and removing unnecessary code
12:21 Applying your game code
14:53 Establishing a connection with your server
16:28 Rendering components
19:43 Applying the user’s movement in the components
lessons
07.06.2023this is great !
marietto2008
15.02.2023What's the utility of having one square which makes the same moves that are updated in two screens instead of having two squares which makes different moves that are updated on the same screen ? The example game that you created is not useful at all in the reality. I mean,it can't be taken as a basic structure for building a more detailed game.
Sir Prize
24.08.2022having a (Cross-Origin) error, anyone knows how to fix that?
George Burkadze
18.07.2022React.js + php შესაძლებელია მსგავსი რამე რასა აწყობ ხო? თუ კარგი მცოდნეა.
Олег Бессонов
07.04.2022Thanks, nice lesson.
Mask Man
07.04.2022I have got the errors : POST http://localhost:8080/socket.io/?EIO=3&transport=polling&t=MhBguJ3 404 (Not Found)
Fabian B.
07.04.2022Awesome! So clear to understand. Ver nice!
khushboo umrigar
07.04.2022Hey, need your quick help. Can you tell me a way to add an image instead of a rectangle?
Bhaskar Nair
07.04.2022Excellent tutorial, thank you!!
fanatic
07.04.2022nice one, but it would be much better if you leave source code in the description
Matthijs Missiaen
07.04.2022Thanks!!
Henrique Penna
06.04.2022Are you using a database to save the data??
WTF
06.04.2022why do u mix javascript with css and html? It's awful…
M41k Develops
06.04.2022Nice tutorial. The effort you put in it is pretty good. +1 sub
Tayzar Naing Win
06.04.2022i got this.socket.io is not a function error. what shall i do?
Kamran Khan
06.04.2022Love you, man
KrynetiX
06.04.2022What programming environment are you using? It looks great.
Cody Bontecou
06.04.2022Great intro to this idea, thanks!
Tom Scharstein II
06.04.2022Great lesson! Would've been great if you'd recommended a means to host the server, instead of keeping it completely local. Now I know how to do the basic functions, but still am completely unsure how to make this a useable example in the real world.
Aslam Doctor
06.04.2022awesome tutorial. to extend the functionality, I would like to place a new dot when new client is opened, so we can move client specific dots and that way we have multiple dots moving. How can I do that?
Spiderous
06.04.2022What if I want to deploy it on, let's say, Heroku? I have to include environmental variable on server and then http://localhost:3000 isn't seen anymore.
Anderson feliciano andré
06.04.2022Excellent, you saved my project!!!!
RabbitWerks JavaScript
06.04.2022amazing work. vue is awesome. nice job and thanks for the sub!
Madalin Antonoiu
06.04.2022Hey Nic, amazing video – this is exactly what i was looking for. Why i appreciate you so much:
– You are not using npm weirdo packages that makes understanding code real hard like level 9999
– You have very clear explanations, the way you write code is very clear.
Big thumbs up, you earned a new subscriber, and honestly, you should have at least 100k+ soon !
Please keep adding videos!
Munazil
06.04.2022omg thank you so much! This is so much clearer than other videos on making chat room with socket.io. You explained the difference and purpose of socket & socketio and how to use them. You even created the client side with vuejs by running two different projects at the same time as an example, unlike other videos that only run the server project. Brilliant!
Ben Evans
06.04.2022in case if you still need to fix your indents, change the spaces to 4 instead of two 🙂 (File->Preferences->Tab Size->4)
Code Cactus
06.04.2022Very good at explaining things. You have my sub.
Shivraj Nag
06.04.2022Please make a tutorial series on creating slither.io clone with backend.
Joe Stuart
06.04.2022Great video, thank you. If I want to upload this to a server on the internet, what type of host should I upload it to? I assume that you can't just upload it to an Apache http server like godaddy? Thanks.
Zakonserwowany Koncentrat
06.04.2022How to deploy application like this on heroku? You declarate socket = io("http://localhost:3000"😉 so how should i change it for the real server?
RTW590
06.04.2022Very useful stuff, thank you!!!
Jazz Rich
04.04.2022Capitalized variable names?? What kind of a madman are you???
PatriksPlayZone
04.04.2022The term 'npm' is not recognized as the name of a cmdlet, function, script file, or
operable program. Check the spelling of the name, or if a path was included, verify that the
path is correct and try again…. I am a beginner please help.
eDogBomb
04.04.2022Incredible tutorial. Is there more content building off of this tutorial? For example, how would you handle two separate clients, each controlling separate squares, updating each other's board simultaneously?
Dodo dada
04.04.2022Is there a way to create Heroku app in this way by using two different ports: 3000, 8080?
Atomzy
04.04.2022; with js 👍
Daniel
04.04.2022Omg finally a websockets tuturial that works 😀 Thank you so much. I'm stil confused why the server listens on 3000 and then the local host is 8080 and it still works. Maybe that's why I couldn't make it work anywhere else before?
Mannerheim Line
04.04.2022Necroboy (: it's a little necromant man
w h a t w a s t h a t
04.04.2022anyone else getting cors errors?
William Resvoll Skaug
04.04.2022Great tutorial! I have a slight problem. Somehow my rectangle disappears when trying to get the data from this.socket.on. Is there any obvious reason this could happen? Thanks!
Martin Pedraza
04.04.2022awesome ! thanks so much !!!
yourgflikesit
03.04.2022Dumb you should update the position on the server when it receives a right command. That way the client receives the new position and so can other clients if it is a multiplayer game.
Santiago P. A
03.04.2022just in case someone gets the following error message: "..has been blocked by CORS policy: .." you first need to allow cross-resource sharing . To accomplish this, your server should look like this:
var app = require('express')()
var http = require('http').Server(app)
//var io = require('socket.io')(http)
const io = require("socket.io")(http, {
cors: {
origin: "http://192.168.0.11:3000",
methods: ["GET", "POST"]
}
});
Make sure the origin value matches your vue js project server address and port. I struggled with this one full day until finally realizing what was wrong.
Rajik Kali
03.04.2022Nraboy, eh?
Nina M
03.04.2022by far the best tutorial on integrating Express/Node with Vue! Thaaaank you! <3
Igor Noia
03.04.2022thanks
kellokz Qt
03.04.2022has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. How to fix that?
Joshua Colell
03.04.2022If you are having problems with the project not rendering/showing the content, search for: el: '#app' or something like that!
Eduardo Pedra de Oliveira
03.04.2022great video! you could make a follow up video teaching how to create a maze game 😉 it would be nice to play with my daughter!
Gazudin
03.04.2022could you quickly explain why you don't get any CORS policy errors?