I am trying to implement chat using the following URL:
https://socket.io/get-started/chat/ ...
the above website says I need to install socket.io using npm
npm install --save socket.io
But I think I have already installed socket.io on my system but I don't know how to check whether it is already or not.
I tried
socket.io -v
but it throws the following error
-bash : socket.io: command not found
Socket.io has been installed on your system if the npm command runned normally.
You can try for example a file with this script in your index.html
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('/');
socket.emit('api', {command: 'test', args: {
text: "Hello World"
}}, function(result) {
console.log(result)
});
socket.on('api', function(data, fn){
if(data.command=="test"){
window.alert (data.args.text)
}
});
</script>
Related
I am running a vite.js app with web3 installed.
When I run the app in dev mode, all works fine but when I run it in production mode (build) it fails with:
"TypeError: Cannot read properties of undefined (reading 'call')".
I can confirm that the error comes from the contract method generated from my ABI:
contract.methods.isOwner(sender).call({from: sender}, function (err, res)
If I comment this line out I wont get the error.
You can reproduce the error by using my test repo:
download my test repo:
https://github.com/nybroe/web3_vite_call_of_undefined/tree/main
follow the readme with repo steps:
setup:
download the repro
navigate to "app"
npm install
dev test (which works)
npm run dev
check the console - no errors
build test (which breaks)
npm run build
npm run preview
check the console - you will see the following errors: "TypeError: Cannot read properties of undefined (reading 'call')"
https://stackoverflow.com/a/69021714
I use the option 2
In your vite.config.js, add web3:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
I wrote an app using the webpack-boilerplate for vue. The backend handling GET and POST requests is an express-server. IDE is visual studio code.
This is what I did:
$ vue init webpack app
$ cd app
$ npm install
$ npm install axios express body-parser node-sass sass-loader
$ npm install --save-dev concurrently nodemon
app/express/app.js looks like:
//import express from express
var express = require('express')
var app = express()
// sets port 8080 to default or unless otherwise specified in the environment
app.set('port', process.env.PORT || 8080)
var bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(express.static(`${__dirname}/../dist/`))
// Test: curl -X POST -H "Content-Type: application/json" -d '{"path": "bla/blub.txt"}' http://localhost:8081/api/save
app.post('/api/save', function (req, res) {
response = {
msg: 'okay',
data: Math.floor(Math.random() * 10)
};
res.end(JSON.stringify(response))
})
var server = app.listen(app.get('port'), function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
I modified the boilerplate code generated by vue init webpack such that app/components/HelloWorld.vue is:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import Axios from 'axios'
const baseUrl = "http://127.0.0.1:8080/api"
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
async created() {
this.msg = await Axios.post(`${baseUrl}/save`, {"path": "bla/blub.txt"})
.then(response => new Promise(resolve => {
let msg = response.data.msg
resolve(msg)
}))
.catch(error => {
console.log(error)
Promise.reject(error)
})
}
}
</script>
<style lang="scss" scoped>
h1 {
font-weight: normal;
}
</style>
To start development in one command (npm start go) and allow hot reloading, I changed app/package.json (don't know where I copied that from):
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"apiserver": "PORT=8081 nodemon express/app.js",
"go": "concurrently --kill-others \"npm run dev\" \"npm run apiserver\"",
"start": "npm run dev",
"build": "node build/build.js"
},
To start the dev version of the app, I ran:
$ npm run dev # webpack-dev-server starts on port 8080, express on 8081
To avoid CORS-problems, webpack can be configured to proxy express requests. Change app/config/index.js:
proxyTable: {
'/api':{
target: 'http://localhost:8081',
changeOrigin: true,
}
},
One can now run npm run dev from app/ again, everything works fine.
Hence, over to production mode. I run
$ npm run build
$ node express/app.js
Everything runs fine.
(Over time, I added answers found by myself into this question... The original question was: "Configure webpack for vue frontend and express backend (scenario both production and development)")
My question is now:
How to change webpack babel setup such that the node-run file app.js uses ECMA2016 (such that import express from express can be used instead of require ...)?
Thanks for any help!
I want to explore this project https://github.com/mqttjs/MQTT.js within the React Native environment. So I did this:
react-native init myproject
npm install --save mqtt
Then I pasted this sample code from the mqttjs into my App.js a bit after the "Welcome to React Native" component.
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://test.mosquitto.org')
client.on('connect', function () {
client.subscribe('presence', function (err) {
if (!err) {
client.publish('presence', 'Hello mqtt')
}
})
})
client.on('message', function (topic, message) {
// message is Buffer
console.log(message.toString())
client.end()
})
But when I run react-native run-android, I get a compilation error with a message like
Module url does not exist in the Haste module map
I tried replacing mqtt://test.mosquitto.org with a url to my own mosquitto broker with some of these values: mqtt://192.168.0.20, tcp://192.168.0.20, 192.168.0.20. But all these still generated the same error.
What am I doing wrong?
You can solve this by explicitly installing the url module:
npm install url
I got an weird issue. BroswerSync works fine when i am on online(connected by wimax) but not working or launching browser when I on offline. Few days back, same issue happened with livereload. What might be the problem?
Here is simple code on gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
});
when i run gulp command showing-
$ gulp browser-sync
[23:25:12] Using gulpfile e:\myapps\gulp-browsersync\gulpfile.js
[23:25:12] Starting 'browser-sync'...
[23:25:13] Finished 'browser-sync' after 119 ms
and stopped..
In my Case I just change
proxy: 'localhost:80'
to
proxy: '127.0.0.98:80'
and its start working..
I might be missing something here, but have you tried setting browserSync options to offline : true ?
If not, this may very well be the problem.
Link : http://www.browsersync.io/docs/options/#option-online
I'm currently trying to incorporate GruntJS with a few plugins (PhantomJS Qunit and Connect plugins). However, setting up a simple test is throwing me errors and I can't find the solution despite a few days of searching. I'm using a local web server (MAMP) and the website is running on a CMS.
Running the tests by accessing the test template in a browser works fine, but when trying to access the same tools via the command line using sudo grunt test PhantomJS return an odd error:
Running "qunit:all" (qunit) task
Testing http://user-guides:80/test/test.html
Warning: PhantomJS timed out, possibly due to a missing QUnit start() call. Use --force to continue.
Aborted due to warnings.
Some of my searches had people downgrading their version of phantom.js to deal with similar problems, but so far none of those solutions have worked for me, and I'm afraid i'm missing something right in front of my face.
Here's the contents of my Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
hostname: 'user-guides',
port: 80,
base: 'public'
}
}
},
jshint: {
all: ['Gruntfile.js', 'public/assets/js/helper/*.js', 'public/assets/js/specific/*.js']
},
qunit: {
all: {
options: {
timeout: 5000,
urls: [
'http://user-guides:80/test/test.html',
]
}
}
}
}
);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('test', ['connect', 'qunit']);
};
Here's the simple Qunit test
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="/assets/lib/qunit.css">
</head>
<body>
<div id="qunit"></div>
<script src="/assets/lib/qunit.js"></script>
<script>
console.log("====TEST===");
start();
test( "hello test", function() {
ok( 1 == "1", "Passed!" );
});
</script>
</body>
</html>
Any help is greatly appreciated.
In my test.html file I originally had just copied the example from the QUnit Cookbook
After finding a similar (possibly the same) issue here:
https://stackoverflow.com/a/25053808/1814739
I updated:
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
to:
<script src="http://code.jquery.com/qunit/qunit-1.15.0.js"></script>
Running from command-line seems to work after adding http: to the src attribute.