I have a error in integration between RequireJS and Axios:
<HEAD>
<script src="3party/require.js"></script>
<SCRIPT>
//work!
requirejs(['/bower_components/jquery/dist/jquery'],()=>{
console.debug($);
})
//error
requirejs(['/bower_components/axios/dist/axios'],()=>{
axios.get('https://httpbin.org/get').then(function(response){
console.log(response.status); // ex.: 200
});
});
</SCRIPT>
</HEAD
The URL is a test service, the error below occurs.
require.js:5 Uncaught Error: Script error for "/bower_components/axios/dist/axios"
https://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:5)
Any URL, or even the below line, the error occurs:
console.debug(axios);
I am using the below version:
"axios": "^0.19.2",
I've checked the AXIOS code and it does support AMD. So you need to use it as a regular AMD:
<HEAD>
<script src="3party/require.js"></script>
<SCRIPT>
requirejs(['/bower_components/jquery/dist/jquery'],()=>{
console.debug($);
})
requirejs(['/bower_components/axios/dist/axios'],(axios)=>{ // axios is given as a argument to a your callback
axios.get('https://httpbin.org/get').then(function(response){
console.log(response.status); // ex.: 200
});
});
</SCRIPT>
</HEAD>
AXIOS will not be available as global but as a local module when you require it :)
Related
I have installed multiple times Flask-socketio on my mac, closely reading the instructions and installing the requirements (eventlet/gevent). Athough when i run my simple code to test, it either says that i have not imported the modules or show nothing until i open index.html in my browser where it then displays :
The client is using an unsupported version of the Socket.IO or Engine.IO protocols (further occurrences of this error will be logged with level INFO)
Here is my app.py code:
from flask import Flask
from flask_socketio import SocketIO, send
app = Flask(__name__)
app.config['SECRET_KEY'] = 'hello'
socketio = SocketIO(app, cors_allowed_origins='*')
#socketio.on('message')
def handle(msg):
print("message: "+msg)
send(msg, bradcast=True)
if __name__ == '__main__':
socketio.run(app)
And here is my terminal window:
Here is my index.html code (if needed):
<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var socket = io.connect('http://127.0.0.1:5000');
socket.on('connect', function() {
socket.send('User has connected!');
});
socket.on('message', function(msg) {
$("#messages").append('<li>'+msg+'</li>');
console.log('Received message');
});
$('#sendbutton').on('click', function() {
socket.send($('#myMessage').val());
$('#myMessage').val('');
});
});
</script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>
Thank you for your help
Check the Flask-SocketIO docs for information about version compatibility.
You have installed Flask-SocketIO version 5, so you need version 3 of the JavaScript client, but you have 1.4.8.
Use this CDN URL instead for version 3.0.5: https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.5/socket.io.min.js
I just wrote a basic JavaScript with a button that joins a conference. I used, the the APP ID, Key and the username to generate a token with -jar. On the web console it says "Connection FailedVIDYO_CONNECTORFAILREASON_ConnectionFailed onFailure". Any inputs on this are much appreciated, Thanks!
Below is the code:
<html>
<head><title>Video Handler</title>
<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
</head>
<body>
<script>
var vidyoConnector;
function onVidyoClientLoaded(status){
console.log("VidyoClient load state"+status.state);
if(status.state== "READY"){
VC.CreateVidyoConnector({
viewId:"renderer",
viewStyle:"VIDYO_CONNECTORVIEWSTYLE_Default",
remoteParticipants:2,
logFileFilter:"error",
logFileName:"",
userData:""
}).then(function (vc){
console.log("Create Success");
}).catch(function(error){
});
}
}//end of vidyo client
function joinCall(){
vidyoConnector.Connect({
host:"prod.vidyo.io",
token:"cHJvdmlzaW9uAGF4YjM4ODIwQHVjbW8uZWR1QDdlNjE4Yi52aWR5by5pbwA2MzcwMzA5NjQ0NAAANDA0MjQ1MmE3N2RlYzA3ZGEwYmNjNTAzYWUzMTVhZWVjNzUzNmQ1NTBiMGU2NDQ3NTY0MzMxODI5ODRkMmU3YzQ0ODBhMTI3YzlkODE5Yjk2OGFjYjY4YWViNmRlOTcw",
displayName:"Arun",
resourceId:"IntranetEngineeringConference",
onSuccess:function(){
console.log("Connected to the Conference");
},
onFailure:function(reason){
console.error("Connection Failed");},//end of OnFailure
onDisconnected: function(reason){
console.log("disconnected -"+reason);
}//end of OnDisconnect
})
}//end of videocal function
</script>
<script src="https://static.vidyo.io/latest/javascript/VidyoClient/VidyoClient.js?onload=onVidyoClientLoaded"></script>
<h3>Hello Video Test</h3>
<button onclick="joinCall()">Join Conference</button>
<div id="renderer"></div>
I believe the problem is that you did not set the vidyoConnector.
Try the following code instead:
var vidyoConnector;
function onVidyoClientLoaded(status){
console.log("VidyoClient load state"+status.state);
if(status.state== "READY"){
VC.CreateVidyoConnector({
viewId:"renderer",
viewStyle:"VIDYO_CONNECTORVIEWSTYLE_Default",
remoteParticipants:2,
logFileFilter:"error",
logFileName:"",
userData:""
}).then(function (vc){
vidyoConnector = vc;
console.log("Create Success");
}).catch(function(error){
});
}
}//end of vidyo client
Let me know if this helps.
I have this on my server
app.get('*', function(req, res) {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
const body = renderToString(<RouterContext {...renderProps} />)
res.send(`
<!DOCTYPE html>
<html>
<head>
<link href="//cdn.muicss.com/mui-0.6.5/css/mui.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root">${body}</div>
<script defer src="assets/app.js"></script>
</body>
</html>
`)
})
})
And this on the client side
import { Router, hashHistory, browserHistory, match } from 'react-router'
let history = browserHistory
//client side, will become app.js
match({ routes, location, history }, (error, redirectLocation, renderProps) => {
render(<Router {...renderProps} />, document.getElementById('root'))
})
the problem
It works only when I remove the (let history = browserHistory), but it adds the /#/ hash prefix to my url(which I don't want to happen).
When I leave the let (history = browserHistory) there, it throws an error
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) < ! -- react-empty: 1 -
(server) < section data-reactro
The error message is pretty clear, however, I don't understand why it works with the hashHistory but fails with the browserHistory
version incompatibility issue
solution
{
"history": "^2.1.2",
"react-router": "~2.5.2"
}
links:
https://github.com/reactjs/react-router/issues/3003
I have created the LinkedIn app and retrieved the client id and client_secret.
Now inside the integrated api of OAuth.io created an api and have added the keys and permission scope.
I want to run this project using Ionic Framework. What should be done to achieve it.
P.S: I am new to Ionic Framework and OAuth.io. So please don't mind my style of asking the question.
whole index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button class="button" ng-click="linkedInLogin()">Login via LinkedIn</button>
</body>
</html>
whole app.js:
angular.module('starter', ['ionic', 'ngCordova', 'ngCordovaOauth'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("MainCtrl", function($scope, $cordovaOauth) {
document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
// on button click code
$scope.linkedInLogin = function(){
OAuth.initialize('07IxSBnzVoGGQL2MpvXjSYakagE')
OAuth.popup('linkedin').done(function(result) {
// Here you will get access token
console.log(result)
result.me().done(function(data) {
// Here you will get basic profile details of user
console.log(data);
})
});
};
}
});
Please go through the steps and below code:
1) create a project from terminal as ionic start linkedinlogin blank
2)cd linkedinlogin project
3)Add the required platform in terminal as ionic add platform ****
4)Add the ng-cordova.min.js file above the cordova.ja file in our project
5)Install ng-cordova-oauth as bower install ng-cordova-oauth -S
6)Then include ng-cordova-oauth.min.js file in index.html
7)Inject 'ngCordova' and 'ngCordovaOauth' as dependency in app.js file
8)In index.html create a button as login via linkedin
9)In app.js create a Controller with below code
10)Please update your cordova platform if the above plugin doesn't work
$cordovaOauth.linkedin(clientId, clientSecret, ['r_basicprofile', 'r_emailaddress']).then(function(success){
//Here you will get the access_token
console.log(JSON.stringify(success));
$http({method:"GET", url:"https://api.linkedin.com/v1/people/~:(email-address,first-name,last-name,picture-url)?format=json&oauth2_access_token="+success.access_token}).success(function(response){
// In response we will get firstname, lastname, emailaddress and picture url
// Note: If image is not uploaded in linkedIn account, we can't get image url
console.log(response);
}, function(error){
console.log(error);
})
}, function(error){
console.log(error);
})
I thing you read the ngCordova plugins.
Using oauth.io i have implemented login via linkedin:
Please follow the steps:
1. Create a app in oauth.io and get public key.
2. Click on the Integrated APIs menu from the left side bar.
3. Now click on ADD APIs green button on the right top corner.
4. Now Search and select LinkedIn.
5. Now add the Client id and Client Secret in keys and permission scope.
6. use below command to add plugin to project:
cordova plugin add https://github.com/oauth-io/oauth-phonegap
7. For controller code check below code.
document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
// on button click code
$scope.linkedInLogin = function(){
OAuth.initialize('your public key')
OAuth.popup('linkedin').done(function(result) {
// Here you will get access token
console.log(result)
result.me().done(function(data) {
// Here you will get basic profile details of user
console.log(data);
})
});
};
}
Hope it may be help you..
#JustinKominar #justinKominar I
'm still getting this error although my code is exactly like the documentation?
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: XXXXXXXXXXXXXXX
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
function onError(error) {
console.log(error);
}
function getProfileData() {
IN.API.Raw("/people/~:(id,first-name,last-name,email-address)").result(onSignIn).error(onError);
}
function liAuth(){
IN.User.isAuthorized(function(){
callback();
});
}
</script>
error in the chrome console dev tools point to
function liAuth(){
IN.User.authorize(function(){
callback();
});
Uncaught ReferenceError: callback is not defined
(anonymous function) # VM9423:15
(anonymous function) # framework?v=0.0.1195-RC8.54174-1429&lang=undefined:3632
liAuth # VM9423:14
onclick # (index):1
After a lot fo searching online, it was as simple as going to the Chrome settings and clearing out LinkedIn cookies.
You have called the callback function but didn't defined. Create a callback function.