I use inspect to check and it shows as below:
lottie.js:3 Failed to load file:///Users/Downloads/ani/js/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I dont know how to read Json from a .json file from my local sever?
can anyone help me to solve it?
var animation = bodymovin.loadAnimation({
container: document.getElementById('Ani'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'js/data.json'
})
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bodymovin Demo</title>
<!-- Styles -->
<style>
#Ani{max-width: 800px; margin:0 auto;}
</style>
</head>
<body>
<div id="Ani"> </div>
<!-- Scripts -->
<script src="js/lottie.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You are opening the file with the file protocol and you try an Ajax request. That wont work. You better open the file over a server. You can use apache or any webserver? By example if you are familiar with Node you can use http-server
or use lite-server.
npm install http-server -g
http-server 'path/to/your/project' -o
That should open the browser window at: localhost:8080 or other port if 8080 is not free
Related
I want to implement a chat client. so I tried with conversejs. but I can't found to integrate it with the react application. Is there any way to do it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/7.0.2/dist/converse.min.css">
<script src="https://cdn.conversejs.org/7.0.2/dist/converse.min.js" charset="utf-8"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script>
converse.initialize({
authentication: 'anonymous',
auto_login: true,
auto_join_rooms: [
'anonymous#conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
notify_all_room_messages: [
'anonymous#conference.nomnom.im',
],
singleton: true,
show_controlbox_by_default: true,
view_mode: 'overlayed'
});
</script>
</html>
I need to get a socket.io server running using python.
I followed this example:
https://tutorialedge.net/python/python-socket-io-tutorial/
With the final files looking as follows:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button onClick="sendMsg()">Hit Me</button>
<!--WORKS:-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>-->
<!-- DOESNT WORK:-->
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
const socket = io("http://localhost:8080");
function sendMsg() {
socket.emit("message", "HELLO WORLD");
}
socket.on("message", function(data) {
console.log(data);
});
</script>
</body>
</html>
server.py
from aiohttp import web
import socketio
sio = socketio.AsyncServer()
app = web.Application()
sio.attach(app)
async def index(request):
with open('index.html') as f:
return web.Response(text=f.read(), content_type='text/html')
#sio.on('message')
async def print_message(sid, message):
print("Socket ID-: " , sid)
print(message)
await sio.emit('message', message[::-1])
app.router.add_get('/', index)
if __name__ == '__main__':
web.run_app(app)
So much this is only copy paste and thus works fine, but I dont want to use the script from some online source. So I tried to modify the src of the script by commenting out the running version and replacing it by a version using a local socket.io.js.
As I did not find the script on my machine I found the following questions, that both did not help me solve my issue:
node-js-socket-io-socket-io-js-not-found
socket-io-not-being-served-by-node-js-server
No matter what I do I get the following error in my browser:
GET http://localhost:8080/node_modules/socket.io/socket.io.js net::ERR_ABORTED 404 (Not Found)
(index):18 Uncaught ReferenceError: io is not defined
at (index):18
(anonymous) # (index):18
From what I understood from the 2 linked threads, my server should provide the socket.io/socket.io.js when listen is called on the server.
Unfortunately this is not happening in my case.
I had socket.io installed via pip, I also tried npm install socket.io --save as suggested, this gives me a new folder 'node_modules', but modifying the src for my script to:
<script src="http://localhost:8080/node_modules/socket.io/socket.io.js"></script>
doesnt help either.
For some reason using the fie from cdnjs works just fine (see my index.html).
I would be very glad if someone could help me out with this.
Cheers
Chris
I've never worked with AIOHTTP (always worked with flask-socketio) so I did some research using the documentation. It turns out that like a lot of http server, AIOHTTP doesn't serve static files out of the box.
You will thus need to take care of it using the add_static method (doc here).
(Note that if you want to deploy this app for production it would be better practice to use an HTTP server like Apache or Nginx).
Just add this line under your routes declarations.
app.router.add_static('/static/', path='static/')
Now you need to create a static folder in the root of your project and put your socket.io.js file inside of it.
Make sure that the socket.io.js in the version 2.2 (same as the CDN version). You can get this file by downloading it directly from the CDN URL you were using or using npm -i -s socket.io-client#2.2. You can then find the socket.io.js file in node_modules/socket.io-client/dist.
You now just need to use <script src="/static/socket.io.js"></script> in your HTML to import socket.io.
I've created
a Blazor Server app (BlazorServerApp)(.Net Core 3.1)
a .NET Standard Class Library (MyClassLibrary)
I've added the MyClassLibrary project to the dependencies of the BlazorServerApp. Then I've added wwwroot folder to the MyClassLibrary project and added test.js file to this folder.
I've edited the MyClassLibrary project file as follows:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<AssemblyName>MyClassLibrary</AssemblyName>
<RootNamespace>MyClassLibrary</RootNamespace>
</PropertyGroup>
<ItemGroup>
<EmbeddedResource Include="wwwroot\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
</Project>
Blazor web app call the UseStaticFiles method in Startup, which enables static files to be served:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
I've added the test.js as <script src="_content/MyClassLibrary/test.js"></script> in the _Host.cshtml (BlazorServerApp project):
#page "/"
#namespace BlazorServerApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorServerApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="_content/MyClassLibrary/test.js"></script>
</body>
</html>
However, when I run the BlazorServerApp project the error appears in the browser:
GET https://localhost:5001/_content/MyClassLibrary/test.js net::ERR_ABORTED 404
That is, the web app doesn't find such a resource at the specified path.
Can anyone explain why this is happening and what needs to be done in order for the application to access static resources (such as js or css) in other dependent projects (net standard class library in my case)?
Open the component project properties and go to package tab.
You must set a value in Package id
Then you use this id to specify the path
<script src="_content/package_id/test.js"></script>
I know this was about two years ago, but I found an answer to this.
If you are running your app in Development, chances are you are finding your static web assets just fine. But, if you change your ASPNETCORE_ENVIRONMENT to anything else you will find you get a bunch of 404 errors when trying to get your assets.
To work around this add StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment,builder.Configuration); to your main Main method, or your Program.cs in .net 6.
I found this information here on the aspnetcore github. They talk more about the static asset loader here which is where I found how to use it, but the issue on 38212 seemed to be unrelated. I didn't do a deep dive on how the static asset loader worked though, or why it's needed.
I am creating a chat system within my mobile app, but I am running into a problem. I have defined jQuery and the signalR within my index. I also have defined the script path to my server.
Code (index.html)
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Cordova whitelist plugin -->
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<!-- Base libs -->
<script src="libs/ionic/js/ionic.bundle.js"></script>
<script src="libs/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- Third party libs -->
<script src='libs/jquery/dist/jquery.min.js'></script>
<script src='libs/signalR/jquery.signalR.min.js'></script>
<!-- Location for SignalR lib to open a connection with -->
<script src="http://www.mytestserver.nl/chathub/signalr/hubs"></script>
<!-- Application Javascript files | put the routing files after the controllers! -->
<script src="app/app.js"></script>
</head>
I have a working version on my localhost, so I do think my code is right.
When I try to use the code in my controller I get a 404 not found error.
I think this is because I do not define a port in my script to the server. Then signalR defaults to the current host (localhost:8100).
Code (chatController.js)
.controller('ChatController', ['$scope', '$state', function ($scope, $state) {
$.connection.hub.url = "http://www.mytestserver.nl/chathub/signalr";
$.connection.hub.start().done(function () {
console.log("hello world");
});
}]);
Not the DNS comes in. I cannot define a port number, because the DNS is removing the port numbers. Defining any port number results in a 404 not found or a Connection timed out error.
What can I do to make a connection to the server?
Ive had this situation before which worked fine on devexpress localhost but when transferred to IIS the path would not map correctly.
Its possible that the path you specify to signalr/hubs is not correct so the server does not pick it up correctly.
Try adding a wildcard to your signalr/hubs reference like this
<script src="~/signalr/hubs"></script>
After this open the javascript console and ensure that there are no errors.
Trying to work on some code that has no issues on other computers. This problem seems to be specific to my laptop and no other computers. Even a "hello world" app only returns a debug gif.
repository folder> node app.js
Express Server Listening on port 3000
GET / 200 1000.00 ms - -
This is the code delivered to the browser instead of my code
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, minimum-scale=0.1" name="viewport">
<title>127.0.0.1 (1×1)</title>
<style type="text/css">
</style>
</head>
<body style="margin: 0px;">
<img src="http://127.0.0.1:3000/" style="-webkit-user-select: none">
</body>
</html>
Troubleshooting included:
Ran cmd as admin
Re-installing Node.js
Deleted temp npm & npm cache folders in appdata/roaming
No error on the development tools in chrome or Firefox
Kaspersky blocks 127.0.0.1 activity. Add Web Anti-Virus Exclusions Trusted URLS & Safe Surf fixes this issue.
Simply disabling the Antivirus didn't fix the issue for me. The Exclusions are a necessity