Blazor serverside (dotnet core 3.1)
I run into the problem that on customer side this is shown:
Could not reconnect to the server. Reload the page to restore functionality.
Each time I update the code base or internet is broken or something like this.
Now the goal is that it should reload the page as soon as the server is back again (or in some interval).
Is there any possibility that could help me?
You can try this code:
<script src="_framework/blazor.server.js"></script>
<script>
Blazor.defaultReconnectionHandler._reconnectCallback = function(d) {
document.location.reload();
}
</script>
<script>
// Wait until a 'reload' button appears
new MutationObserver((mutations, observer) => {
if (document.querySelector('#components-reconnect-modal h5 a')) {
// Now every 10 seconds, see if the server appears to be back, and if so, reload
async function attemptReload() {
await fetch(''); // Check the server really is back
location.reload();
}
observer.disconnect();
attemptReload();
setInterval(attemptReload, 10000);
}
}).observe(document.body, { childList: true, subtree: true });
</script>
This will wait until the reload button appears and then will wait until the server is back up before actually reloading.
From https://github.com/dotnet/aspnetcore/issues/10325#issuecomment-537979717
For .NET 6 & 7 you can use:
<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start().then(() => {
Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
document.location.reload();
}
});
</script>
This keeps all of the original startup process as is and just adds a page reload on connection down, without needing a mutations observer.
Here's an alternative but I'm not sure it works 100%.
<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start().then(() => {
Blazor.defaultReconnectionHandler._reconnectionDisplay = {
show: () => {},
update: (d) => {},
rejected: (d) => document.location.reload()
};
});
</script>
One trick some people forget about is that you can actually "watch" your code base for changes, if you open your favorite terminal and run dotnet run watch debug in the same folder as your cproj file it should watch your changes so when you refresh your browser it should pick up any changes to your application, formore information read: https://learn.microsoft.com/en-us/aspnet/core/tutorials/dotnet-watch?view=aspnetcore-3.1
dotnet watch is a tool that runs a .NET Core CLI command when source files change. For example, a file change can trigger compilation, test execution, or deployment.
Hope this helps
Related
I have a problem with a wildcard page /pages/[...slug].vue and fetching from backend.
I have a computed called url that I use in:
const { data, refresh } = await useFetch(url.value)
Then I have a watcher to refresh the useFetch:
watch(url, (url, oldUrl) => {
console.log(url)
console.log(oldUrl)
refresh()
})
In the browser, the console log shows the correct url, but useFetch just loaded the old url again.
Any idea what's wrong here? Thanks.
[edit: clarification: this is when navigation in browser, that triggers the watch]
I believe because computed is a 'getter' behind the scenes you need to use a deep watcher on it or watch the returned value directly otherwise the watch function will not run.
You could change your watch function to to:
watch(url, (url, oldUrl) => {
console.log(url)
console.log(oldUrl)
refresh()
},
{ deep: true }
)
Alternatively you could directly watch the value of the computed property:
watch( () => url.value, (url, oldUrl) => {
console.log(url)
console.log(oldUrl)
refresh()
},
{ deep: true }
)
There is a bit more information here: https://vuejs.org/guide/essentials/watchers.html#basic-example
Hi i had the same issue 2 days ago.. i guess that the issue happens because of the default keep alive props and internal caching.
My solution was to use $fetch() instead of useFetch().
Like that you also don't need the watcher anymore.
I am confused about something.
I am trying to use the dropzone.js meteor package (http://atmospherejs.com/dbarrett/dropzonejs) with my meteor application but I could not find any example about it. In the documentation it says:
Use the template like this
{{> dropzone url='http://somewebsite.com/upload' id='dropzoneDiv'}}
and
it will post any uploaded files to the url of your choice.
So if I write,
{{> dropzone url='http://localhost:3000/home' id='dropzoneDiv'}}
as soon as I drop the image, is it going to upload it to /public/home folder? I mean is the package handling server-side saving image too?
If not, can you please give me some tips about how I can handle the server side saving?
Thank you
Dropzone can be a bit confusing:
First you should get a file management system for Meteor. The standard right now is CollectionFS:
https://github.com/CollectionFS/Meteor-CollectionFS
Then you need to add a file system. I use GridFS, which breaks up large files into chunks and stores them for you into Mongo:
https://github.com/CollectionFS/Meteor-cfs-gridfs/
Follow the instructions for creating, publishing, and subscribing to your new, special, FS Collection:
example for creating the collection:
MyImages = new FS.Collection('myImages', {
stores: [new FS.Store.GridFS("myImages")]
});
After those two are installed, create your dropzone:
<template name="imageUpload">
<form action="/file-upload" class="dropzone" id="dropzone"></form>
</template>
Then in your javascript:
Template.imageUpload.rendered = function(){
if (Meteor.isClient){
var arrayOfImageIds = [];
Dropzone.autoDiscover = false;
// Adds file uploading and adds the imageID of the file uploaded
// to the arrayOfImageIds object.
var dropzone = new Dropzone("form#dropzone", {
accept: function(file, done){
MyImages.insert(file, function(err, fileObj){
if(err){
alert("Error");
} else {
// gets the ID of the image that was uploaded
var imageId = fileObj._id;
// do something with this image ID, like save it somewhere
arrayOfImageIds.push(imageId);
};
});
}
});
};
};
I'm assuming, it doesn't show upload progress, because its instant with meteor.
You are updating mini-mongo location in-browser, so the changes are immediate.
Meteor DDP then handles the glue to get it to the server, and then pushing those changes to the other clients that might be subscribed. That "instant" update is the meteor magic. Alert yourself, or log to console on success. You can also check the db via MyImages.find().fetch().
If they are there, all done.
Please find below link(example of dropzonejs):
https://github.com/devonbarrett/meteor-dropzone/tree/master/example-app
Put {{>dropzone url="/upload" id="template-helper"}} In your template
<template name="test">
{{>dropzone url="/upload" id="template-helper"}}
</template>
Then at server side:
if (Meteor.isServer) {
Meteor.startup(function () {
UploadServer.init({
tmpDir: process.env.PWD + '/public/uploads',
uploadDir: process.env.PWD + '/public/uploads',
checkCreateDirectories: true,
uploadUrl: '/upload'
});
});
}
I have run into an issue recently where we have been told to remove the hash symbols from our Backbone applications. This presents two problems: (a) the ASP.NET routes need to handle any remotely linked URL (currently this is no problem with the hash symbols) so that we're not hitting a 404 error and (b) the proper route needs to be preserved and passed on to the client side (Backbone) application. We're currently using ASP.NET MVC5 and Web API 2 for our backend.
The setup
For an example (and test project), I've created a test project with Backbone - a simple C# ASP.NET MVC5 Web Application. It is pretty simple (here is a copy of the index.cshtml file, please ignore what is commented out as they'll be explained next):
<script type="text/javascript">
$(document).ready(function(event) {
Backbone.history.start({
//pushState: true,
//root: "/Home/Index/"
});
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
//appRouter.navigate("/test/sometext", { trigger: true });
//appRouter.navigate("/help", { trigger: true });
});
</script>
<div class="jumbotron">
<h3>Backbone PushState Test</h3>
</div>
<div class="row"></div>
Now, without pushState enabled I have no issue remote linking to this route, ie http://localhost/Home/Index#test/sometext
The result of which is that the div with a class of .row is now "Hello, sometext".
The problem
Enabling pushState will allow us to replace that pesky # in the URL with a /, ie: http://localhost/Home/Index/test/sometext. We can use the Backbone method of router.navigate("url", true); (as well as other methods) to use adjust the URL manually. However, this does not solve the problem of remote linking. So, when trying to access http://localhost/Home/Index/test/sample you just end up with the typical 404.0 error served by IIS. so, I assume that it is handled in in the RouteConfig.cs file - inside, I add a "CatchAll" route:
routes.MapRoute(
name: "CatchAll",
url: "{*clientRoute}",
defaults: new { controller = "Home", action = "Index" }
);
I also uncomment out the pushState and root attributes in the Backbone.history.start(); method:
Backbone.history.start({
pushState: true,
root: "/Home/Index/"
});
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
//appRouter.navigate("/test/sometext", { trigger: true });
//appRouter.navigate("/help", { trigger: true });
This allows me to at least let get past the 404.0 page when linking to these routes - which is good. However, none of the routes actually "trigger" when I head to them. After attempting to debug them in Chrome, Firefox, and IE11 I notice that none of the events fire. However, if I manually navigate to them using appRouter.navigate("/help", { trigger: true }); the routes are caught and events fired.
I'm at a loss at this point as to where I should start troubleshooting next. I've placed my Javascript inside of the $(document).ready() event as well as the window.onload event also (as well as not inside of an event); none of these correct the issue. Can anyone offer advice on where to look next?
You simply have to move Backbone.history.start after the "new Route" line.
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
Backbone.history.start({
pushState: true,
root: "/Home/Index/"
});
Make sure you go to ".../Home/Index/help". If it doesn't work, try temporarily removing the root and go to ".../help" to see if the root is the problem.
If you still have troubles, set a js breakpoint in Backbone.History.loadUrl on the "return" line. It is called from the final line of History.start to execute the current browser url on page load. "this.matchRoot()" must pass then, "fragment" is matched against each "route" or regexp string in "this.handlers". You can see why or why not the browser url matches the route regexps.
To set to the js breakpoint, press F12 in the browser to open the dev console, press Ctrl-O or Ctrl-P to open a js file, then type the name of the backbone js file. Then search for "loadUrl:". You can also search for "Router =" to find the start of the router class definition (same as for "View =" and "Model =" to find the backbone view/model implementation code). I find it quite useful to look at the backbone code when I have a question like this. It is surprisingly readable and what better place to get answers?
If your js files happen to be minified/compressed, preferably turn this off. Alternately you can try the browser unminify option. In Chrome this is the "{}" button or "pretty print". Then the js code is not all on 1 line and you can set breakpoints. But the function and variable names may still be mangled.
I have solved my own problem using what feels to be "hackish", via the following. If anyone can submit a better response it would be appreciated!
My Solution:
I globally override the default Backbone.Router.intilaize method (it is empty) with the following:
$(document).ready(function (event) {
var _root = "/Home/Index/";
_.extend(Backbone.Router.prototype, {
initialize: function () {
/* check for route & navigate to it */
var pathName = window.location.pathname;
var route = pathName.split(_root)[1];
if (route != undefined && route != "") {
route = "/" + route;
this.navigate("", { trigger: false });
this.navigate(route, { trigger: true });
}
}
});
});
I'm using laika for testing and the meteor-router package for routing. I want to do tests that navigate to some page, fill a form, submit it and check for a success message, but I'm stuck on the navigation part. This was my first attempt:
var assert = require('assert');
suite('Router', function() {
test('navigate', function(done, server, client) {
client.eval(function() {
Meteor.Router.to('test');
var title = $('h1').text();
emit('title', title);
})
.once('title', function(title) {
assert.equal(title, 'Test');
done();
});
});
});
This doesn't work because Meteor.Router.to doesn't have a callback and I don't know how to execute the next line when the new page is loaded.
I tried also with something like this
var page = require('webpage').create();
page.open('http://localhost:3000/test', function () {
...
}
but I got the error Error: Cannot find module 'webpage'
Edit
I'm moving to iron router, so any answer with that also will be helpful.
I had the same problem. I needed to navigate to some page before running my tests. I'm using iron router as well. I figured you can't just execute Router.go('foo') and that's it. You need to wait until the actual routing took place. Fortunately the router exposes a method Router.current() which is a reactive data source that will change as soon as your page is ready. So, in order to navigate to a specific route before running my tests, I firstly run the following code block:
// route to /some/path
client.evalSync(function() {
// react on route change
Deps.autorun(function() {
if (Router.current().path == '/some/path') {
emit('return');
this.stop();
}
});
Router.go('/some/path');
});
Since this is within an evalSync()everything that follows this block will be executed after the routing has finished.
Hope this helps.
Laika now includes a waitForDOM() function you can set up to wait for a specific DOM element to appear, which in this case would be an element in the page you're loading.
client.eval(function() {
Router.go( 'test' );
waitForDOM( 'h1', function() {
var title = $('h1').text();
emit( 'title', title );
});
});
The first parameter is a jQuery selector.
Has anyone tried using the new AJAX script loader to load Sys.Component dependencies?
For example, I have an IScriptControl, which gets instantiated during page load with $create, but the component has a dependency on another file, which is loaded asynchronously with Sys.loadScripts().
Blah.js:
Type.registerNamespace('Blah');
MyComponent.js:
Sys.loadScripts(['blah.js'], function() {
Blah.MyComponent = function() {
Blah.MyComponent.initializeBase(this);
};
Blah.MyComponent.prototype = {
// ...
};
Blah.MyComponent.registerClass('Blah.MyComponent', Sys.Component);
});
MyPage.aspx:
<script type="text/javascript" src="MyComponent.js"></script>
<script type="text/javascript">
Sys.Application.add_init(function() {
$create(Blah.MyComponent, ...);
// This fails, because it runs before MyComponent has been initialized, which in turn is waiting for blah.js to load
});
</script>
It seems that the Sys.Application.init event doesn't wait for any sync scripts to finish loading, and Sys.loadScripts doesn't block, so the initialization fails.
I could hack the add_init function to load the component script asynchronously, e.g.:
Sys.Application.add_init(function() {
// load component asynchronously
Sys.loadScripts(['MyComponent.js'], function() {
$create(...);
});
});
This would probably work, but it just feels wrong. Instead of just calling ScriptManager.RegisterScriptControl, I'd have to roll my own initialization code. What's the right way to handle this scenario?
Thanks!