Hi,
I’m trying to set up a PlayCanvas project that talks to a Nakama server for realtime multiplayer functionality. I’m following along a very similar structure to the one in this tutorial, just using the nakamajs client instead of socket.io: Real Time Multiplayer | Learn PlayCanvas
I notice that the Nakama Docs using async/await calls to wait for a socket to connect, amongst other things. Is there any way I can do this inside the initialize() function in my script?
Hi @jpalmz,
You are free to use async/await in your initialize method (just make sure that all of your audience supports ES6). The code editor will complain that there is a syntax error (even if you use the ES6 flag) but when you execute your code it will run correctly.
This is a valid feature request for the editor, if you would like to submit it here as well:
Of course you can refactor any async/await code to use promises, since it’s just syntactic sugar over that.
Okay great, so changing the initialize() function within a PC script doesn’t break its rules or anything? I do see those syntax errors complaining about a missing semicolon. I’ll give it a try and request that feature as well.
Do you know any tutorials or projects using PlayCanvas + Nakama together for realtime multiplayer?
By the way, you can paste this as the first line of your script(s):
/*jshint esversion: 6 */
However, this just supports basic ES6 language features like let, const, arrow functions, etc. It doesn’t cover async/await. For that, you would need:
/*jshint esversion: 9 */
But it seems the version of CodeMirror used by the Code Editor doesn’t support this option. Might require an upgrade for that.
CC @vaios
How about a solution to update the version of JSHint?
It looks like JSHint is being used in PlayCanvas.
ES7, ES8 and ES9 are supported in JSHint 2.10.0 or later versions.
The latest version is 2.12.0.
I was able to run the latest version of JSHint in my code editor.
window.JSHINT = null
window.JSHINT = ....
esversion:6 to esversion:9 in the code editorNow you can use async / await.
I’m trying to reproduce the solution into my PlayCanvas project. I’m not getting what to do with the dots in window.JSHINT = .....
I have copied the full jshint-2.12.0/dist/jshint.js file into a new .js file in my project. Then, in one initialise method I write window.JSHINT = null. But after that I don’t know exactly how to make it work.
Can someone help? Thanks!
@PolVegaTPM It looks like @RyutoHaga is doing this in the devtools console window when the code editor is open, not in the PlayCanvas project.
Then I’m not getting how it has to be done in order to make it work. Can you explain me a little bit better how to get ES9 working with that method?
ES9 will work in PlayCanvas and browsers that support ES9 (PlayCanvas doesn’t do any transpiling beyond minifying on publish) but it will just give ‘errors’ and ‘warnings’ in the code editor that you can ignore.
What Ryuto has done is update the JS Hint version to get rid of those.
Sure! I have noticed that. It works so its fine, but doing a backend integration with async functions make the editor looks horrible with lots of errors and warnings. Thats why I was trying to update the JS Hint as Ryuto did.
I can work with that, but I just want to do it to work better.
This is going to be tedious as you will need to do this every time you load the Code Editor (although can be shortcuted by creating a custom browser extension or using a JS bookmarklet)
Open the Code Editor
Open Devtools
Make window.JSHINT = null
Paste the contents of jshint.js https://raw.githubusercontent.com/jshint/jshint/master/dist/jshint.js into Devtools
Change to esversion 9
Kapture 2021-01-14 at 10.53.58
I see it now! Thank you very much for the explanation!
Jumping in, why PC wouldn’t transpile? Nowaydays, it doesn’t make really sense to write old JavaScript like MouseInput.prototype.initialize = function() {}. ES6 with classes is way better!
Also having an option to choose TypeScript would be awesome.
We are considering adding Babel as a publish step but for the launch window, we have to take into consideration the extra cost on resources (the servers would need to transpile the code when the user opens the launch tab).
We have released https://github.com/playcanvas/playcanvas-sync that allows users to write code locally on their PC and upload to their projects. This also allows users to use their own code workflow such as Typescript and ES9
Indeed this is a nice option, I’m a bit worried of the time needed to set it up and the workflow, but definitely good to know!
A first step to have PC editor running on an Electron app on our own Desktop ? 
There’s been some discussions on this but unfortunately nothing cemented on the roadmap yet.
As another way to update JSHint in a single click is to turn it into a bookmarklet.
Add a new bookmark with the following code:
javascript:(function(){var t=document.createElement("script");t.src="https://jshint.com/res/jshint/dist/jshint.js",t.onload=function(){var t;(t=editor.call("editor:codemirror")).setOption("lint",!1),t.setOption("lint",!0),window.alert("JS Hint updated")},document.head.appendChild(t)})();
When in the Code Editor, click on the bookmark (only needed per Code Editor browser tab)
This could probably also be done automatically via a GreaseMonkey script
Ah that’s nice thanks for sharing! I got tired of async/await breaking syntax validation.
Np, I reckon it be just as easy to make a GreaseMonkey script that just does it automatically