I am just getting started with cfwebsockets and I am having a bit of trouble. What I found from online, is that since this is public-facing application, it is best to use a websocket proxy.
CF2021, Version: 2021.0.03.329779
Ubuntu 20.04LTS
Steps so far:
I added the websocket package to my server and enabled web-sockets. Restarted Server.
Added this to my application.cfc:
<cfset this.wschannels = [ {name="chat"} ] />
(the application has a this.name= set from a variable as well
3. created a simple page that has this:
<cfwebsocket
name="wSocketObj"
onMessage="wsOnMessage"
onOpen="wsOnOpen"
onClose="wsOnClose"
onError="wsOnError"
subscribeTo="chat"
secure="true"/>
<script type="text/javascript">
wsOnMessage = function(aEvent,aToken) {
console.log('wsOnMessage',aevent);
var message = ColdFusion.JSON.encode(atoken);
var txt=document.getElementById("myDiv");
txt.innerHTML +=message +"<br>";
}
wsOnOpen = function() {
alert("wsOnOpen Connection is open");
}
wsOnClose = function() {
alert("wsOnClose Connection Closed");
}
wsOnError = function() {
alert("wsOnError!");
console.log(arguments);
}
sendMessage = function() {
var text = window.prompt("Enter some text","");
if (text) {
wSocketObj.publish("chat", text);
}
}
</script>
<cfdiv id="myDiv"></cfdiv>
<div id="myChatArea"></div>
<input type="text" id="myMessage" /><input id="myButton" type="button" value="Send Message" onClick="sendMessage()" />
got this in the Chrome Console:
WebSocket connection to 'wss://myhost.mydomain.com:8555/cfusion/cfusion' failed:
CFWebSocketWrapper.open # cfwebsocketCore.js:21
init # cfwebsocketChannel.js:49
_cf_websockets_init_6322652258206397 # client.cfm:35
fire # cfajax.js:1214
$E.windowLoadHandler # cfajax.js:1321
cfwebsocketCore.js:54 Uncaught TypeError: Cannot set properties of undefined (setting 'readyState')
at WebSocket.wsConnection.onerror (cfwebsocketCore.js:54:29)
thinking it was a firewall issue, I disabled it in Ubuntu
It was at this point that it seemed to be that I needed to configure a proxy.
I ran /opt/ColdFusion/cfusion/bin/wsproxyconfig.sh from the command line and verified that both the line in apache2.conf was there and the folder "/opt/ColdFusion/config/wsproxy/1/mod_wsproxy.conf" was created. Restarted apache2 and CF2021
Same Result
Realized I need to change the websocket config in CF Admin,
When I select the Use Proxy in CF Admin, the Save Changes button disappears and I cannot save it.
Obviously I am missing something very fundamental here. Any help that anyone can provide would be appreciated.
thanks in advance
Related
My goal is to add a token in the socketio reconnection from the client (works fine on the first connection, but the query is null on the reconnection, if the server restarted while the client stayed on).
The documentation indicates I need to use the Manager to customize the reconnection behavior (and add a query parameter).
However, I'm getting trouble finding how to use this Manager: I can't find a way to connect to the server.
What I was using without Manager (works fine):
this.socket = io({
query: {
token: 'abc',
}
});
Version with the Manager:
const manager = new Manager(window.location, {
hostname: "localhost",
path: "/socket.io",
port: "8080",
query: {
auth: "123"
}
});
So I tried many approaches (nothing, '', 'http://localhost:8080', 'http://localhost:8080/socket.io', adding those lines to the options:
hostname: "localhost",
path: "/socket.io",
port: "8080" in the options,
But I couldn't connect.
The documentation indicates the default URL is:
url (String) (defaults to window.location)
For some reasons, using window.location as URL refreshes the page infinitely, no matter if I enter it as URL in the io() creator or in the new Manager.
I am using socket.io-client 3.0.3.
Could someone explain me what I'm doing wrong ?
Thanks
Updating to 3.0.4 solved the initial problem, which was to be able to send the token in the initial query.
I also found this code in the doc, which solves the problem:
this.socket.on('reconnect_attempt', () => {
socket.io.opts.query = {
token: 'fgh'
}
});
However, it doesn't solve the problem of the Manager that just doesn't work. I feel like it should be removed from the doc. I illustrated the problem in this repo:
https://github.com/Yvanovitch/socket.io/blob/master/examples/chat/public/main.js
I have a NativeScript application that I'm trying to add iBeacon support to using the iBeacon plugin. The application builds successfully and is synced to my phone (I'm using SideKick). When the app runs, it has a fatal javascript exception. The javascript error is reported at:
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:244:56: JS ERROR Error: Building UI from XML. #file:///app/app-root.xml:18:9
That line is where the page that attempts to access the iBeacon code is defined:
<Frame defaultPage="views/search/search-page"></Frame>
and the specific error is:
Importing binding name 'BeaconLocationOptions' is not found.
I'm assuming this occurs as part of the following import statement:
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';
The above import statement is what is documented as part of the iBeacon documentation.
There is a nativescript-ibeacon directory under node_modules in my project. The specific ios file seems to be there:
/Users/edscott/NativeScript/beacon-test/node_modules/nativescript-ibeacon/nativescript-ibeacon.ios.js
I'm not sure if it is a problem in my code or a problem with configuration - maybe something missing that stops the ibeacon files from being deployed properly to the device.
My code is in javascript, but I have installed the typescript plugin. It looks like this iBeacon plugin assumes the app is written in typescript.
I'm looking for help in determining what to try next.
FYI...I've tried pulling the source files out of the node_modules and incorporating them directly into my project. After resolving many issues with this approach, I eventually hit the same wall - a problem importing the code when running on the device.
Below is the code that is using the iBeacon plugin:
const observableModule = require("tns-core-modules/data/observable");
import {NativescriptIbeacon, BeaconCallback, BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType, BeaconRegion, Beacon } from 'nativescript-ibeacon';
function SearchViewModel() {
let callback = {
onBeaconManagerReady() {
// start ranging and/or monitoring only when the beacon manager is ready
this.nativescriptIbeacon.startRanging(this.region);
this.nativescriptIbeacon.startMonitoring(this.region);
},
didRangeBeaconsInRegion: function(region, beacons) {
console.log("didRangeBeaconsInRegion");
},
didFailRangingBeaconsInRegion: function(region, errorCode, errorDescription) {
console.log("didFailRangingBeaconsInRegion");
}
};
let options = {
iOSAuthorisationType: BeaconLocationOptionsIOSAuthType.Always,
androidAuthorisationType: BeaconLocationOptionsAndroidAuthType.Coarse,
androidAuthorisationDescription: "Location permission needed"
};
let nativescriptIbeacon = new NativescriptIbeacon(callback, options);
let region = new BeaconRegion("HelloID", "2f234454-cf6d-4a0f-adf2-f4911ba9ffa6");
const viewModel = observableModule.fromObject({
"beaconData": "not set yet",
"onTapStart": function() {
this.set("beaconData", "started");
console.log("tapped start");
if (!nativescriptIbeacon.isAuthorised()) {
console.log("NOT Authorised");
nativescriptIbeacon.requestAuthorization()
.then(() => {
console.log("Authorised by the user");
nativescriptIbeacon.bind();
}, (e) => {
console.log("Authorisation denied by the user");
})
} else {
console.log("Already authorised");
nativescriptIbeacon.bind();
}
},
"onTapStop": function() {
this.set("beaconData", "stopped");
console.log("tapped stop");
nativescriptIbeacon.stopRanging(region);
nativescriptIbeacon.stopMonitoring(region);
nativescriptIbeacon.unbind();
}
});
return viewModel;
}
module.exports = SearchViewModel;
I have created a playground for you here.
If you look into example, I am importing NativescriptIbeacon from the main folder and rest from the common folder.
P.S. This plugin has dependency on nativescript-permission
import { NativescriptIbeacon } from '../nativescript-ibeacon';
import {
BeaconRegion, Beacon, BeaconCallback,
BeaconLocationOptions, BeaconLocationOptionsIOSAuthType, BeaconLocationOptionsAndroidAuthType
} from "../nativescript-ibeacon/nativescript-ibeacon.common";
This answer solved my problem along with another modification. After splitting the import up I still had the same error. Then I read the following page about modules:
https://docs.nativescript.org/core-concepts/android-runtime/getting-started/modules
Based on this statement:
If the module identifier passed to require(moduleName) does not begin
with '/', '../', or './', then NativeScript will lookup the module
within the tns_modules folder
I assumed that maybe only require does the proper lookup into tns_modules.
I refactored the import to use require instead, and that worked. My changes are below. There may be a more efficient way to do this, but it worked for me.
const nsb = require("nativescript-ibeacon/nativescript-ibeacon.js");
const nsbc = require("nativescript-ibeacon/nativescript-ibeacon.common.js");
const NativescriptIbeacon = nsb.NativescriptIbeacon;
const BeaconCallback = nsbc.BeaconCallback;
const BeaconLocationOptions = nsbc.BeaconLocationOptions;
const BeaconLocationOptionsIOSAuthType = nsbc.BeaconLocationOptionsIOSAuthType;
const BeaconLocationOptionsAndroidAuthType = nsbc.BeaconLocationOptionsAndroidAuthType
const BeaconRegion = nsbc.BeaconRegion;
const Beacon = nsbc.Beacon;
hello there i am trying to access my youtube api key located in the .env file from within this code:
<template>
<div class="YoutubeDash__wrapper">
<video-group :videos="videos"></video-group>
</div>
</template>
<script>
import VideoGroup from './VideoGroup.vue';
import Search from './Search';
export default {
components: {
VideoGroup
},
created(){
Search({
apiKey: process.env.VUE_APP_SECRET,
term: 'laravel repo'
}, response => this.videos = response);
},
data(){
return {
videos: null
}
}
}
</script>
According to the documentation using env variables with vue.js. Everything seems to be correct. In my .env file i say: VUE_APP_SECRET=xxxxxxxxxxxxxxx, what am i missing here ?
I get this error message:
app.js:37809 Error: YouTube search would require a key
Any tips are welcome! Thanks a lot!
We need to work with a small amount of information here so I am going to make a few assumptions (based on the tags) mostly that you are using laravel and laravel-mix to compile your resources.
For laravel(-mix) to make your .env variables accessible by JS you need to prefix them with MIX_ i.e. MIX_VUE_APP_SECRET. This will make your variable accessible as process.env.MIX_VUE_APP_SECRET.
I prefer excluding laravel-mix from this process.
Usually, in my blade entry-point I use meta tags:
<meta name="myVal" content="{{ config('<any-config-key>') }}">
<any-config-key> can be any laravel configuration key including those taken from .env.
Then, in my javascript I do something like:
const setVueGlobal = (metaHeaderName, vueGlobalName) => {
let value = document.head.querySelector('meta[name="' + metaHeaderName + '"]').content;
if (!value) {
console.error('some error msg');
return null;
}
Vue.prototype[vueGlobalName] = value;
return value;
};
setVueGlobal('myVal', '$myVal');
Finally, accessing using this.$myVal
I'm trying to run browserstack behind the firewall.
I tried to run this command on terminal:
RK$ ./BrowserStackLocal --key <key> --force-local
BrowserStackLocal v7.0
You can now access your local server(s) in our remote browser.
Press Ctrl-C to exit
I opened another terminal and I ran the command
npm run test:functional:cr:mobile
I get the following error:
1) Run sample test flow page:
Uncaught WebDriverError: [browserstack.local] is set to true but local testing through BrowserStack is not connected.
This is my config.js
'use strict'
import webdriver from 'selenium-webdriver'
let driver
module.exports = {
getDriverConfiguration: function (testTitle, browserName) {
var capabilities = {
'browserName': process.env.BROWSER || 'Chrome',
'realMobile': 'true',
'os': 'android',
'deviceName': process.env.DEVICE || 'Samsung Galaxy S8',
'browserstack.user': 'USER',
'browserstack.key': 'KEY',
'browserstack.debug': 'true',
'build': 'Build for mobile testing',
'browserstack.local' : 'true',
'browserstack.localIdentifier' : 'Test123'
}
driver = new webdriver.Builder().withCapabilities(capabilities).usingServer('http://hub-cloud.browserstack.com/wd/hub').build()
driver.manage().deleteAllCookies()
return driver
}
}
I enabled browserstack.local to true but I still get this error.
Not sure where I'm going wrong.
Please kindly help.
The error [browserstack.local] is set to true but local testing through BrowserStack is not connected. is returned if your BrowserStackLocal connection (the one you established using ./BrowserStackLocal --key --force-local) is disconnected.
I would suggest you use the following approach instead, to avoid the additional step and easily manage your local testing connection:
npm install browserstack-local
Once you have installed the browserstack-local module, use the following code snippet as reference to modify your code and start browserstack-local from your code itself(before the line driver = new webdriver.Builder().withCapabilities(capabilities).usingServer('http://hub-cloud.browserstack.com/wd/hub').build()), instead of starting it from a separate terminal window:
var browserstack = require('browserstack-local');
//creates an instance of Local
var bs_local = new browserstack.Local();
// replace <browserstack-accesskey> with your key. You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
var bs_local_args = { 'key': '<browserstack-accesskey>', 'forceLocal': 'true' };
// starts the Local instance with the required arguments
bs_local.start(bs_local_args, function() {
console.log("Started BrowserStackLocal");
});
// check if BrowserStack local instance is running
console.log(bs_local.isRunning());
// stop the Local instance
bs_local.stop(function() {
console.log("Stopped BrowserStackLocal");
});
I am struggling with a issue with react-router + webpack code split + servicer worker (or cache).
Basically the issue is the following, the code split is working properly but from time to time I get error reports from customers at sentry.io such as:
"Dynamic page loading failed Error: Loading chunk 19 failed."
My react-router code is the following:
const errorLoading = (err) => {
console.error('Dynamic page loading failed', err);
};
export default (
<Route path="/" component={App}>
<IndexRoute
getComponent={(nextState, cb) => {
System.import('./containers/home/home')
.then((module) => { cb(null, module.default); })
.catch(errorLoading);
}}
/>
</Route>
);
For my ServiceWorker I use OfflinePlugin with the following configuration:
new OfflinePlugin({
cacheName: 'cache-name',
cacheMaps: [
{
match: function(requestUrl) {
return new URL('/', location);
},
requestTypes: ['navigate']
}
],
externals: [
'assets/images/logos/slider.png',
'assets/images/banners/banner-1-320.jpg',
'assets/images/banners/banner-1-480.jpg',
'assets/images/banners/banner-1-768.jpg',
'assets/images/banners/banner-1-1024.jpg',
'assets/images/banners/banner-1-1280.jpg',
'assets/images/banners/banner-1-1400.jpg'
],
responseStrategy: 'network-first', // One of my failed attempts to fix this issue
ServiceWorker: {
output: 'my-service-worker.js'
}
})
The issue is not browser related because I have reports from IE11, safari, chrome, etc.
Any clues on what I might be doing wrong or how can I fix this issue?
Edit 2: I ended using chunks with hashes, and doing a window.location.reload() inside errorLoading's catch(), so when the browser fails to load a chunk it will reload the window and fetch the new file.
<Route path="about"
getComponent={(location, callback) => {
System.import('./about')
.then(module => { callback(null, module.default) })
.catch(() => {
window.location.reload()
})
}}
/>
It happens to me too and I don't think I have a proper solution yet, but what I noticed is this usually happens when I deploy a new version of the app, the hashes of the chunks change, and when I try to navigate to another address (chunk) the old chunk doesn't exist (it seems as if it wasn't cached) and I get the error.
I managed to reproduce this by removing the service worker that caches stuff and deploying a new version (which I guess simulates a user without the service worker running?).
remove the service worker code
unregister the service worker in devtools
reload the page
deploy a new app version
navigate to another chunk (for instance from /home to /about)
In my case it appears as if the error occurs when the old files are not cached (hence not available any more) and the user doesn't reload the page to request new ones. Reloading 'fixes' the issue because the app has the new chunk names, which correctly load.
Something else I tried was to name the chunk files without their hashes, so instead of 3.something.js they were only 3.js. When I deployed a new version the chunks were obviously still there, but this is not a good solution because the files will be cached by the browser instead of being cached by the caching plugin.
Edit: same setup as you, using sw-precache-webpack-plugin.