I'm trying to host a chatting app via google cloud,I have been successful enough on the second attempt, after changing the port number to 8080, just to see the html page.
Now my problem is after inspecting the elements via firefox, I am not able to see the messages show on the screen anymore, which I was successful in seeing when I was hosting it on my pc.
The error messages that I get constantly when trying to send a message is:
With a black X next to it:
GET
http://bla.appspot.com/socket.io/
Then:
Firefox can't establish a connection to the server at ws://bla/socket.io/?EIO=3&transport=websocket&sid=5Z6HGjPLI5L2ddNHAADj.
After:
POST
XHR
http://bla.appspot.com/socket.io/
Firefox can't establish a connection to the server at ws://bla.appspot.com/socket.io/?EIO=3&transport=websocket&sid=5Z6HGjPLI5L2ddNHAADj.
And Then:
The connection to ws://bla.appspot.com/socket.io/?EIO=3&transport=websocket&sid=9Ps_KY0O0UvKfWePAADz was interrupted while the page was loading.
The second and third long sentences just constantly rinse and repeat.
I'm not sure as to why socket.io has appeared at the end of the line, but for some reason it has.
Here is my code related to sending and receiving the messages:
"use strict";
var app = require ('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(8080, function(){
console.log('listening on *:8080');
});
And this is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Socket.IO chat</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /> <button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
Could anyone help me with this please? It has been really bugging me a lot and I just can't seem to wrap my head around how to make it work.
Thanks in advance.
So I have figured out my problem.
Turns out that what was causing the actual problem was the line in my code for index.html
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
It was working the whole time, but on a different browser, this is because different browsers have different types of security to prevent attacks such as eavesdropping and man-in-the-middle (MITM) attacks.
For example testing this out on Firefox/Chrome would give me the error I have displayed but once I tested it out on IE I was able to see all the messages displayed with the IE exception of leaving the connection "open".
I was able to find more useful errors that helped me reach this conlusion which was Blocked loading mixed active content with this I was able to find out that if I removed
http:
from
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
This would stop firefox/chrome from blocking the content.
Related
I'm making a Firefox extension to open sites on a sidebar. It mostly works except for some sites like mastodon.social and github, I keep bumping into the Cross-Origin Resource Sharing (CORS) policies, which restricts other websites from displaying their content in iframes for security reasons.
How can I avoid that? Just to clarify, I'm not trying to circumvent it, I just want the site to open on my sidebar normally. Other extensions like Webpage Sidebar Viewer show the sites without any issue at all. This is my first extension, so I'm struggling to find the issue.
Here is my code:
MANIFEST.JSON
{
"manifest_version": 2,
"name": "Website Viewer",
"version": "1.0",
"description": "A website viewer with a bookmark feature",
"icons": {
"48": "icons/icon48.png"
},
"sidebar_action": {
"default_title": "Website Viewer",
"default_panel": "panel.html",
"default_icon": {
"48": "icons/icon48.png"
}
},
"permissions": [
"activeTab",
"storage",
"<all_urls>"
]
}
PANEL.HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Viewer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sites"><button id="bookmark">+</button></div>
<script src="panel.js"></script>
</body>
</html>
STYLE.CSS
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#bookmark {
display: block;
border: 1px;
border-radius:5px;
border-color: gray;
}
#sites {
display: flex;
flex-wrap: wrap;
margin: 10px;
overflow-y: auto;
height: auto;
width: 100%;
}
button {
cursor: pointer;
margin: 5px;
padding: 0;
width: 16px;
height: 16px;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
PANEL.JS
let iframe = null;
function showWebsite(url) {
// If the iframe has not been created yet, create it and add it to the page
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'website-iframe');
document.body.appendChild(iframe);
}
// Set the src attribute of the iframe to the URL of the website to display
iframe.src = url;
// Listen for the iframe's load event and set its sandbox attribute to allow scripts and forms
iframe.addEventListener('load', () => {
iframe.setAttribute('sandbox', 'allow-scripts allow-forms');
});
}
function addBookmark() {
browser.tabs.query({currentWindow: true, active: true}).then((tabs) => {
var site = tabs[0].url;
// If the site is not already in the list of bookmarks, add it
if (!document.getElementById(site)) {
var item = document.createElement('button');
item.setAttribute('id', site);
item.style.backgroundImage = `url("https://s2.googleusercontent.com/s2/favicons?domain=${site}")`;
item.addEventListener('click', () => {
showWebsite(site);
});
document.getElementById('sites').appendChild(item);
browser.storage.local.set({
[site]: true
});
}
});
}
function initialize() {
browser.storage.local.get().then((items) => {
Object.keys(items).forEach((key) => {
var item = document.createElement('div');
item.setAttribute('id', key);
item.textContent = key;
item.addEventListener('click', () => {
showWebsite(key);
});
document.getElementById('sites').appendChild(item);
});
});
}
document.addEventListener('DOMContentLoaded', initialize);
document.getElementById('bookmark').addEventListener('click', addBookmark);
My extension should open any website on the sidebar. Instead, I got an error saying that security measures that avoid loading the site altogether.
I´m rendering my chat using this:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
.main {
margin: 18px;
border-radius: 4px;
}
div[role="form"] {
background-color: black;
}
div[role="log"] {
background: gainsboro;
}
div[role="status"] {
background: darkgray;
}
#webchat {
position: fixed;
height: calc(100% - 135px);
z-index: 9999;
width: 400px;
top: 132px;
overflow: hidden;
border-color: red;
border-style: dotted;
visibility:visible;
}
</style>
</head>
<body>
<div>
<div id="heading">
<div id="heading">
<h1><img src="mylogo.png"> mychat</h1>
</div>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
openchat();
function openchat() {
const styleOptions = {
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
botAvatarInitials: '',
userAvatarInitials: 'You',
bubbleBackground: 'rgba(0, 255, 50, .4)',
bubbleFromUserBackground: 'rgba(125, 125, 125, .3)',
botAvatarImage: 'mylogo.png'
};
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: '*'
}),
styleOptions
},
document.getElementById('webchat')
);
}
</script>
</body>
</html>
It works fine, but now I need to publish this chat in the webpage of the company, as a popup or something like that, so using the previous script is OK but I have not options to add a title to the popup and also I need to add a minimize button. How I can set title and minimize button to my webchat inside a main page?
Tx,
I think your best bet going forward is to use the samples provided by the webchat team.
The minimizable webchat sample is a good example.
Hey guys im learning socket io on their website, i just dont understand one thing about the event. Where do they say that clicking on the button "send" is a submit action ? I mean i dont see a onclick event or something like this. Thanks ! Here are the codes:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>
</body>
</html>
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
When the submit event happens the script sends the data with Socket.IO, but not submits the form (return false;). But of course you can use onclick event too.
Socket.IO send:
socket.emit('chat message', $('#m').val());
For example if you have a button with id "testButton":
$('#testButton').click(function() {
socket.emit('chat message', $('#m').val());
});
I've looked at many posts on this subject, but I just can't seem to find a fix for a Google map embedded on my website. It's an iframe that refers back to a separately hosted html file created with the maptiler program. The embed produces the dreaded "Oops! Something went wrong" grey box ... although the desired map does show for about half a second. The java console complains about "no api keys" ... I've created all kinds of Google Maps Javascript API keys, sometimes using the http rule, sometimes not. Nothing works.
The html file appears below. (I've left the key out on purpose.)
<!DOCTYPE html>
<html>
<head>
<title>3rd</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0;
width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#map { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 15px; overflow: auto; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 12px; overflow: hidden; }
#media screen and (max-width: 600px) {
#map { top:0px; left:0px; width:100%; height:100%;}
}
body { background: #f4f4f4;}
#header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#header h1 { padding:7px 10px; margin:0; font-size: 28px; }
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #DEDCD7;}
#footer { text-align:center; font-size:9px; color:#606060; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
#map {
height:expression(document.body.clientHeight-35); /* 10+10+15=35 */
width:expression(document.body.clientWidth-20); /* 10+10=20 */
}
</style>
<![endif]-->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?MY_KEY_HERE&sensor=true"></script>
<!-- Get your Google Maps API Key: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#introduction-->
<!--<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=MY_Key_HERE"></script>-->
<script type="text/javascript">
var map;
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.890044, -75.192903),
new google.maps.LatLng(44.909499, -75.165437));
var mapMinZoom = 13;
var mapMaxZoom = 17;
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var proj = map.getProjection();
var z2 = Math.pow(2, zoom);
var tileXSize = 256 / z2;
var tileYSize = 256 / z2;
var tileBounds = new google.maps.LatLngBounds(
proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
);
var y = coord.y;
var x = coord.x >= 0 ? coord.x : z2 + coord.x
if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
return zoom + "/" + x + "/" + y + ".png";
else
return "https://www.maptiler.com/img/none.png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 1.0
});
function init() {
var opts = {
tilt:0,
streetViewControl: false,
center: new google.maps.LatLng(44.899771, -75.179170),
zoom: 13
};
map = new google.maps.Map(document.getElementById("map"), opts);
map.setMapTypeId('satellite');
map.overlayMapTypes.insertAt(0, maptiler);
}
</script>
</head>
<body onload="init()">
<div id="footer">Generated with MapTiler</div>
<div id="map"></div>
</body>
</html>
Latest Google Maps API requires personal API key for each published website - this is a decision made by Google Maps team.
You have to generate your own API key and use it in the template to get your maps working. More information is available on Google Maps API pages:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#step_3_get_an_api_key
To get your key from the Google Developers Console follow this link:
https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend&keyType=CLIENT_SIDE&reusekey=true
The key is used when pasting Google Maps Javascript Library into a page header of the HTML as a parameter to query (replace YOUR_API_KEY with your own generated key):
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>
</script>
From MapTiler 7.0 on, we added a field for this key to the MapTiler’s Settings. MapTiler will automatically add this key to pre-generated templates with Google Maps API to save your time and effort.
This answer is a repost from MapTiler HowTo:
http://www.maptiler.com/how-to/google-maps-api/
So, the solution was to create yet another project in Google Cloud Console and another API key, which I was careful to verify against my website. I specified the https:// version of the site, among others, and it worked. I had verified the site before but possibly not the https:// version. It may be a coincidence.
i have used the code as following
index.html
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
and then i have to write node index on command prompt and then i can access the chatroom using localhost:3000
but when i upload it to cpanel and open my url the chatroom is not running do i have to do something like putting a command or have to do something with Cpanel?
Thanks
Regards