Loading socket.io lobrary on front end - socket.io

I am trying to learn how to use socket.io and in the tutorial I am doing, they load socket.io on the front end by inserting the following script from cdnjs
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.min.js')
(Note: It seems that the newest is 2.2.0 and available on https://cdnjs.com/libraries/socket.io)
However, I don't see the link to this library through cdnjs on the socket.io website. If I am understanding the socket.io client-side documentation correctly, the documentation shows setting up the library by doing the following:
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io('http://localhost');
</script>
const io = require('socket.io-client');
// or with import syntax
import io from 'socket.io-client';
Basically, are these two different ways to load the library on the client side and is there a difference? It seems weird to insert the script from cdnjs when it doesn't seem to be on the socket.io website.

Related

How do I access BlockBlobClient in Azure Storage JavaScript client library for browsers?

I'm attempting to use BlockBlobClient in a browser page to upload a file using a server-supplied sastoken / URL, similar to this C# code:
var blob = new CloudBlockBlob(new Uri(assetUploadUrl));
blob.UploadFromFile(FilePath, null, new BlobRequestOptions {RetryPolicy = new ExponentialRetry()});
Although the docs suggest BlockBlobClient is available in #azure/storage-blob and should be able to upload browser data from an input[type=file] element using uploadBrowserData, I can find no reference to BlockBlobClient in the browser library source. I looked into modifying the browserify export scripts but I can't find any references in the main package source either. Also the example code suggests that using #azure/storage-blog gives you a BlobServiceClient by default:
const { BlobServiceClient } = require("#azure/storage-blob");
Is BlockBlobClient actually available in the JavaScript client library?
Okay I've figured this out, I need to use the Azure Storage client library for JavaScript, there's even a sample of doing exactly what I need to do. Now I just need to figure out how to bundle npm package files for use in Razor pages.

How does React deal with pre-compiled HTML from PhantomJS?

I compiled my reactjs using webpack and got a bundle file bundles.js. My bundles.js contains a component that make API calls to get the data.
I put this file in my html and pass the url to phantom.js to pre-compile static html for SEO reasons.
I am witnessing something strange here, the ajax calls for APIS are not getting fired at all.
For example, I have a component called Home which is called when I request for url /home. My Home component makes an ajax request to backend (django-rest) to get some data. Now when I call home page in phantomjs this api call is not getting fired.
Am I missing something here?
I have been using React based app rendering in Phantomjs since 2014. Make sure you use the latest Phantomjs version v2.x. The problems with Phantomjs occur because it uses older webkit engine, so if you have some CSS3 features used make sure they are prefixed correctly example flexbox layout.
From the JS side the PhantomJS does not support many newer APIs (example fetch etc.), to fix this add the polyfills and your fine. The most complicated thing is to track down errors, use the console.log and evaluate code inside the Phantomjs. There is also debugging mode which is actually quite difficult to use, but this could help you track down complex errors. I used webkit engine based browser Aurora to track down some of the issues.
For debugging the network traffic, try logging the requested and received events:
var page = require('webpage').create();
page.onResourceRequested = function(request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
};

Socket.io Client for Appcelerator (Titanium Application iOS)

I am building a Titanium based mobile application (iOS) in Appcelerator and want to connect it to Node.js(Socket.io) based server. For that I need a client side socket.io file which.
I tried to import the client side JS using 'require',
var io = require('socket.io'); //JavaScript Downloaded from here: https://github.com/socketio/socket.io-client/blob/master/socket.io.js
var socket = io.connect('http://localhost:3000');
I am getting the following error:
Script Error: Module "socket.io" failed to leave a valid exports object
Please let me know where I am going wrong or what is the way to use socket.io in Appcelerator.
Thanks In Advance.

An ajax call to a url that opens socket.io connection - fails

I have a node.js server running. It accepts messages via socket.IO.
I need to send messages to the server from some device. This device supports Javascript, but does not support socket.IO commands (it's strange, but that's what I have).
I tried to work around it in the following way:
On my server I put a send.html file that sends a socket.IO message:
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script>
var socket = io('http://localhost:3000/');
socket.emit('message', 'messages sent');
</script>
If I just call this file (localhost/send.html) then everything works fine.
Then I try to call send.html via ajax from the device:
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://localhost/send.html", true);
xmlhttp.send();
</script>
and.. nothing happens.
If I try to call any other .html file from the device, then it works. This makes me think that a socket.IO connection cannot be opened by a file that was called by ajax.
However I couldn't find this fact anywhere and anyway, I still need to find a way to send data from the device to socket.IO.
Does anyone know how to solve this problem, or can think of an alternative solution?

Sending and receiving Websockets-like messages in React Native

Is it possible to use websockets (via socket.io etc.) in a React Native app for bidirectional communication with a custom backend rather that using the supported fetch() with polling etc.? For example, neccessary for a chat app with React Native.
Their website does not mention an API for this yet.
I have not tried it myself but it should be no problem to run socket.io for react-native app (it's. Socket.io is pure javascript library without any HTML/CSS dependencies I believe, so simple
npm install socket.io --save
in your project should be enough to start using it.
Actually, it looks like someone did it before and managed to get socket.io working for react-native: https://github.com/badfortrains/wsExample
Here is a step by step of what needs to be done to get socket.io up and running in a react native app. Its very similar to Jarek Ptiuk's answer but has an example of what to do.
Is it possible to combine React Native with socket.io
the example:
import React from 'react-native';
// ... [other imports]
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/socket.io';
export default class App extends Component {
constructor(props) {
super(props);
this.socket = io('localhost:3001', {jsonp: false});
}
// no you can use this.socket.io(...)
// or any other functionality within socket.io!
...
}

Resources