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());
});
Related
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.
I've built what I think is the most current solution for a nested selection with an update pattern.
However, each time update is clicked, I always get the outer selection, but not always the inner (nested) selection. The log to console show a correctly formed array of arrays.
Is this the correct setup for a nested selection in v5?
Here's a codepen
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>#</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style type="text/css">
.outer {
border: 1px solid black;
background-color: grey;
width: 100%;
height: 100px;
position: relative;
display: flex;
}
.inner {
display: flex;
justify-content: flex-start;
border: 1px solid blue;
background-color: cyan;
width: 50px;
height: 50px;
position: relative;
}
</style>
</head>
<body>
<button id='update'>update</button>
<div id="anchor"></div>
<script>
const updateButton = document.getElementById('update');
const anchor = d3.select('#anchor');
updateButton.addEventListener('click', function() {
update(
Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Math.ceil(Math.random() * 5);
});
})
);
});
function update(data) {
const outer = anchor.selectAll('.outer').data(data);
outer.exit().remove();
outer.enter()
.append('div')
.merge(outer)
.attr("class", "outer");
const inner = outer.selectAll('.inner').data(function(d) {
return d;
});
inner.exit().remove();
inner.enter()
.append('div')
.merge(inner)
.attr("class", "inner")
.text(function(d) {
return d;
});
}
</script>
</body>
</html>
In a case like this one you have to reassign the update selection, so its reference is merged with the enter selection (here I'm changing const for let in order to reassign the selection):
//here is the update selection:
let outer = anchor.selectAll('.outer').data(data);
//here is the enter selection:
const outerEnter = outer.enter()
.append('div')
.attr("class", "outer");
//reassigning here:
outer = outerEnter.merge(outer);
Otherwise other will be only the update selection, even if you have a merge method chained in the enter selection. You can clearly see this if you console outer.size().
Here is your code with that change:
const updateButton = document.getElementById('update');
const anchor = d3.select('#anchor');
updateButton.addEventListener('click', function() {
update(
Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Array.from({
length: Math.ceil(Math.random() * 5)
}, function() {
return Math.ceil(Math.random() * 5);
});
})
);
});
function update(data) {
let outer = anchor.selectAll('.outer').data(data);
outer.exit().remove();
const outerEnter = outer.enter()
.append('div')
.attr("class", "outer");
outer = outerEnter.merge(outer);
const inner = outer.selectAll('.inner').data(function(d) {
return d;
});
inner.exit().remove();
inner.enter()
.append('div')
.attr("class", "inner")
.merge(inner)
.text(function(d) {
return d;
});
}
.outer {
border: 1px solid black;
background-color: grey;
width: 100%;
height: 100px;
position: relative;
display: flex;
}
.inner {
display: flex;
justify-content: flex-start;
border: 1px solid blue;
background-color: cyan;
width: 50px;
height: 50px;
position: relative;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<button id='update'>update</button>
<div id="anchor"></div>
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
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.
i am using kendo sortable data source is kendo observable array,
when we sorting the divs we are updating the array object in change event,
but array is updating properly but ui is not updating.
can u please help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="playlist">
<ul id="sortable-basic" data-bind="source:items" data-template="template">
</ul>
</div>
<script type="text/x-kendo-tmpl" id="template">
<li class="sortable">#:value#<span>#:time#</span></li>
</script>
<script>
var data;
$(document).ready(function () {
data = kendo.observable({
items: new kendo.data.ObservableArray([
{ value: 'Papercut', time: '3:12' },
{ value: 'One Step Closer ', time: '4:10' },
{ value: 'With You ', time: '5:00' },
{ value: 'Points of Authority ', time: '2:59' }]
)
});
kendo.bind($('#playlist'), data);
$("#sortable-basic").kendoSortable({
change: function (e) {
var daa = data.items.splice(e.oldIndex, 1);
data.items.splice(e.newIndex, 0, daa[0]);
}
});
});
</script>
<style>
#example
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist
{
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title
{
height: 80px;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid rgba(0,0,0,.1);
}
#playlist-title span
{
display: none;
}
#sortable-basic
{
padding: 0;
margin: 0;
}
li.sortable
{
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
}
li.sortable:last-child
{
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span
{
display: block;
float: right;
color: #666;
}
li.sortable:hover
{
background-color: #dceffd;
}
li.hint
{
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after
{
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child
{
border-radius: 4px;
}
li.hint span
{
color: #fff;
}
li.placeholder
{
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
</body>
</html>
I think I found your problem. It seems to be the change function, just remove it and you can sort your list.
I've not used kendoSortable but I would assume that it is already maintaining the array sort because you have bound the array to the kendoSortable. That's the purpose of binding, it keeps the data and elements in sync for you. What you're doing in the change event is simply undoing the work that the binding just did, that is, sort the elements AND the bound array.
As per telerik,
https://www.telerik.com/forums/sortable-and-moving-items-in-observable-arrays
You have to do this manually and attaching sortable to an array doesn't do anything automatically. So what you are doing is correct, however even though your changes reflect correctly in observable array it doesn't on screen.
So we have to trigger clear and change event, to sync UI with the array. There may be a better way invoke sync without having to clear out array but this was a hack that worked for me.
Here is a sample code where we clear the array and then re-insert which fixes the issue.
$("#sortable-basic").kendoSortable({
change: function (e) {
var daa = data.items.splice(e.oldIndex, 1);
data.items.splice(e.newIndex, 0, daa[0]);
var copiedArray = data.items.splice(0, data.items.length);
$.each(copiedArray,
function (index, item) {
data.items.push(item);
});
}
});