I've cobbled together a web page to control an Onkyo receiver via its serial port using parts of several diverse examples I found mostly on stackexchange. It works well, but I've run into the problem highlighted by #user568109 in the first link below where I think I have "initialized connection eventlisteners from within your routes" instead of globally. (Each time the web page is refreshed, the number of replies sent increments by one.) The problem is I can't see how to do initialize it globally. I tried removing the function:
io.sockets.on('connection', function (socket) {......}
but leaving the ....... part, as was done successfully in the second link below, but that didn't work for my case. Is there a simple fix? I'm a complete novice to node and javascript so I'm hoping it is obvious to someone.
Apart from the additional replies each time the web page is refreshed, it works well. (Apart from initializing the on off switch, the radio buttons and volume slider get initialed correctly, but I'll try to address that once I've sorted this sockets thing out).
Thanks!
Socket.io emits duplicate data after browser refresh
node.js + socket.io - duplicate websocket writes?
Here's the code snippet:
var express = require('express');
app = express();
server = require('http').createServer(app);
io = require('socket.io').listen(server);
var SerialPort = require("serialport")
var serialPort = new SerialPort("/dev/ttyUSB0", {
baudRate: 9600,
dataBits: 8,
parity: 'none',
stopBits: 1
}
);
server.listen(8080);
app.use(express.static('public'));
io.sockets.on('connection', function (socket) {
socket.on('toOnkyo', function (data) {
paramVal = data.value;
var buf = new Buffer(16);
buf.write(paramVal, "utf-8");
serialPort.write(buf);
io.sockets.emit('toOnkyo', {value: paramVal});
});
serialPort.on('data', function(data) {
io.sockets.emit('onkyoReply', {value: data.toString().substr(0,7)});
});
});
console.log("running");
body {
text-align: center;
margin-top: 50px;
background: #50D0A0;
}
input[type=range]{
-webkit-appearance: none;
width: 80%;
}
input[type=range]::-webkit-slider-runnable-track {
height: 10px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 32px;
width: 32px;
border-radius: 50%;
background: goldenrod;
margin-top: -12px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
.radioLeft
{
text-align:left;
}
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Onkyo Controller</title>
<meta name="viewport" content="width=400px" />
<script src="socket.io/socket.io.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
Sent: <span id="sliderVolText"></span><br>
Reply: <span id="replyTextHex"></span>
(Decimal: <span id="replyText10"></span>)<br>
Mode: <span id="modeText"></span><br>
PowerText: <span id="powerText"></span><br>
Power: <span id="power"></span><br>
onoffText: <span id="onoffText"></span><br>
onoff: <span id="onoff"></span>
<script>
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
</script>
<form class="onoffswitch" >
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onclick="showOnoff(checked)">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</form>
<form name="modeForm" method="get" action="" onsubmit="return false;">
<p> <label for="mode0"><input type="radio" value="0x00" name="modeForm" id="mode0" onclick="showMode(this.value)"> Stereo</label>
<label for="mode1"><input type="radio" value="0x01" name="modeForm" id="mode1" onclick="showMode(this.value)"> Direct</label>
<label for="mode2"><input type="radio" value="0x0C" name="modeForm" id="mode2" onclick="showMode(this.value)"> All Ch stereo</label>
<label for="mode3"><input type="radio" value="0x42" name="modeForm" id="mode3" onclick="showMode(this.value)"> THX Cinema</label>
<label for="mode4"><input type="radio" value="0x84" name="modeForm" id="mode4" onclick="showMode(this.value)"> PLllx THX Cinema</label>
<label for="mode5"><input type="radio" value="0x11" name="modeForm" id="mode5" onclick="showMode(this.value)"> Pure</label>
</form>
<form name="slideForm" method="get" action="" onsubmit="return false;">
<input type="range" id= "inputSlider" min="0" max="100" value="vol" step="1" oninput="showVolume(this.value)" />
</form>
<br><br>
<div class="results"></div>
<script type="text/javascript">
var socket = io.connect();
var ctrlType = "";
socket.on('toOnkyo', function (data) {
ctrlType = data.value.toString().substr(2,3);
if (ctrlType == "MVL" && !(data.value.toString().substr(5,4)=="QSTN")){
document.getElementById("inputSlider").value = parseInt(data.value.toString().substr(5,2),16);
document.getElementById("sliderVolText").innerHTML = data.value;
}
if (ctrlType == "LMD" && !(data.value.toString().substr(5,4)=="QSTN")){
document.getElementById("mode").value = parseInt(data.value.toString().substr(5,2),16);
document.getElementById("modeText").innerHTML = data.value;
}
if (ctrlType == "PWR" && !(data.value.toString().substr(5,4)=="QSTN") ){
document.getElementById("power").value = parseInt(data.value.toString().substr(5,2),16);
document.getElementById("powerText").innerHTML = data.value;
}
if (ctrlType == "PWR" && !(data.value.toString().substr(5,4)=="QSTN") ){
document.getElementById("onoff").value = parseInt(data.value.toString().substr(5,2),16);
document.getElementById("onoffText").innerHTML = data.value;
}
});
socket.on('onkyoReply', function (data) {
var done = false;
ctrlType = data.value.toString().substr(2,3);
document.getElementById("replyTextHex").innerHTML = data.value;
document.getElementById("replyText10").innerHTML = parseInt(data.value.toString().substr(5,2),16);
if (ctrlType == "LMD"){
setCheckedValue(document.forms['modeForm'].elements['modeForm'],"0x"+data.value.toString().substr(5,2));
}
if (ctrlType == "PWR"){
var val = parseInt(data.value.toString().substr(5,2),16);
setCheckedValue(document.forms['powerForm'].elements['powerForm'],"0x"+data.value.toString().substr(5,2));
}
if (ctrlType == "MVL" && done == false){
document.getElementById("inputSlider").value = parseInt(data.value.toString().substr(5,2),16);
document.querySelector('.results').innerHTML = parseInt(data.value.toString().substr(5,2),16);
done = true;
}
});
function showVolume(newValue) {
document.getElementById("sliderVolText").innerHTML="\!1MVL"+("0" + Number(newValue).toString(16)).slice(-2)+"\r\n";
socket.emit('toOnkyo', { value: "\!1MVL"+("0" + Number(newValue).toString(16)).slice(-2)+"\r\n" });
}
function showMode(newValue) {
document.getElementById("modeText").innerHTML="\!1LMD"+("0" + Number(newValue).toString(16)).slice(-2)+"\r\n";
socket.emit('toOnkyo', { value: "\!1LMD"+("0" + Number(newValue).toString(16)).slice(-2)+"\r\n" });
}
function showOnoff(newValue) {
document.getElementById("onoffText").innerHTML="\!1PWR"+("0" + Number(newValue).toString(16)).slice(-2)+"\r\n";
socket.emit('toOnkyo', { value: "\!1PWR"+("0" + Number(newValue).toString(16)).slice(-2)+"\r\n" });
}
socket.emit('toOnkyo', { value: "\!1PWRQSTN"+"\r\n" });
socket.emit('toOnkyo', { value: "\!1LMDQSTN"+"\r\n" });
socket.emit('toOnkyo', { value: "\!1MVLQSTN"+"\r\n" });
</script>
</body>
</html>
Found a solution based on Ian Wooten's blog:
http://www.ianwootten.co.uk/2011/07/04/maintaining-references-to-sockets-with-express-and-socket-io/
Great!
server.listen(8080);
app.use(express.static('public'));
var paramVal = 0;
var countRep = 0;
var countSend = 0;
var buf = new Buffer(16);
var global_socket;
io.sockets.on('connection', function (socket) {
global_socket = socket;
global_socket.on('toOnkyo', function (data) {
paramVal = data.value;
buf.write(paramVal, "utf-8");
serialPort.write(buf);
console.log(paramVal.toString().substr(0,7) + " (" + parseInt(paramVal.toString().substr(5,2),16) + ")\r\n");
global_socket.emit('toOnkyo', {value: paramVal});
console.log('new'+paramVal);
countSend=countSend+1;
console.log('count send '+ countSend);
});
});
serialPort.on('data', function(data) {
console.log('data received: ' + data.toString().substr(0,7) + " (" + parseInt(data.toString().substr(5,2),16) + ")");
global_socket.emit('onkyoReply', {value: data.toString().substr(0,7)});
countRep=countRep+1;
console.log('count '+ countRep);
});
console.log("running");
Related
So Im building a dummy social media application for my resume with NodeJS, MongoDB and React. As such, I have a NewPost form in which user can attach videos or images as files and enter their post captions. I have used Multer on Backend and I have tested my route on Postman and BackEnd is working fine. The only problem is that my form wont send the data at all. I have tried e.preventDefault() but as soon as I make POST axios request the page reloads and I get Request Aborted error in console and since the data is not sent to BackEnd, no posts are created.
One more odd thing I noticed is that when the content is image, posts are created- maybe because by the time it reloads, the images are uploaded already. In any case, my BackEnd is fine- only problem is with the form.
Here is my NewPost Component
import React from 'react';
import './NewPost.css';
import { useParams } from 'react-router-dom';
import axios from 'axios';
const NewPost = (props) => {
const params = useParams();
const submitHandler = async (e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
formData.append('user', params.userId);
console.log(formData.get('user'));
console.log(formData.get('content'));
console.log(formData.get('caption'));
const content = formData.get('content').name;
const imgExt = ['jpg', 'jpeg', 'png', 'avif', 'apng', 'pjp', 'webp', 'svg', 'bmp'];
const ext = content.split('.')[1];
let url;
if (imgExt.includes(ext)) url = `/api/v1/posts/create/contentImage`;
else url = `/api/v1/posts/create/contentVideo`;
try {
const res = await axios.post(url, formData);
if (res.data.status === 'success') {
console.log('Post created successfully!!');
}
} catch (err) {
console.log(err.message);
}
};
return (
<div className="container new-post-box">
<div className="login-form new-post-form">
<button
className="btn-mobile-nav new-post-box-close-btn"
>
<ion-icon name="close" class="overlay-close"></ion-icon>
</button>
<h2 className="heading-secondary heading-login ma-bt-lg">Whats on your mind</h2>
<form className="form form--login" id="login-form" onSubmit={submitHandler}>
<div className="form__group">
<label className="form__label" htmlFor="caption">
Caption
</label>
<input
className="form__input"
id="caption"
type="text"
name="caption"
placeholder="This is an example"
required="required"
/>
</div>
<div className="file-input-box">
<label className="form__label" htmlFor="caption">
Upload Content
</label>
<input
className="form__upload"
type="file"
name="content"
accept="video/*, image/*"
id="content"
/>
<label htmlFor="content" className="form__label fileInput">
Choose file
</label>
</div>
<div className="form__group">
<button className="btn btn--green postSubmitBtn">Submit</button>
</div>
</form>
</div>
</div>
);
};
export default NewPost;
NewPost.css
.form__upload {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.form__upload:focus + label {
outline: 3px solid #673ab7;
outline-offset: 3px;
}
.form__upload + label {
color: #673ab7;
display: inline-block;
text-decoration: none;
border-bottom: 2px solid #673ab7;
padding: 3px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
}
.form__upload + label:hover {
background-color: #673ab7;
color: #fff;
-webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.new-post-box {
margin: 4rem auto;
}
.form__label {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.form__label.fileInput {
margin-bottom: 2.5rem;
font-weight: 600;
}
.postSubmitBtn {
margin: 1rem 11rem;
}
.login-form.new-post-form {
max-width: 51rem;
padding: 4.4rem 7rem;
position: relative;
}
.file-input-box {
display: flex;
align-items: baseline;
gap: 2.4rem;
}
.newpost-caption-closebtn-box {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.btn-mobile-nav.new-post-box-close-btn {
position: absolute;
top: 20px;
right: 14px;
}
Run it on your local machine and please tell me what Im doing wrong. I have almost completed my project and this is for my resume. Without thi working, my entire 2 months hard work will go to waste! Any suggestions would be appreciated! Thank you for your time.
I want to display the sender and receiver message on different side but i dont know how i can do this
this is app.component.ts code
import { Component } from '#angular/core';
import { ChatService } from './chat.service';
import * as moment from 'moment';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularApp';
constructor(private chatService: ChatService){}
newMessage!: string;
messageList: string[] = [];
ngOnInit(){
this.chatService.getNewMessage().subscribe((message: string) => {
let currentTime = moment().format('hh:mm:ss a');
this.messageList.push(message);
})
}
sendMessage() {
this.chatService.sendMessage(this.newMessage);
this.newMessage = '';
}
}
This is chatservice.ts
import { Injectable } from '#angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { io } from "socket.io-client";
#Injectable({
providedIn: 'root'
})
export class ChatService {
public message$: BehaviorSubject<string> = new BehaviorSubject('');
constructor() {}
socket = io('http://localhost:3000');
public sendMessage(message:any) {
this.socket.emit('message', message);
}
public getNewMessage = () => {
this.socket.on('message', (message) =>{
this.message$.next(message);
});
return this.message$.asObservable();
};
}
this is my app.component.html code
<div class="container">
<div class="chat-box">
<!-- client -->
<div class="client">
<h2>Simple Chat App</h2>
</div>
<!-- Main Chat Section -->
<div class="chats" *ngFor="let message of messageList">
<div *ngIf="message" class="client-chat">{{message}}</div>
<div *ngIf="message" class="my-chat">{{message}}</div>
</div>
<!-- Input Field -->
<div class="chat-input">
<input type="text" [(ngModel)]="newMessage" (keyup)="$event.keyCode == 13 && sendMessage()" placeholder="Enter Message">
<button (click)="sendMessage()" id="send-btn" class="btn btn-info">
Send
</button>
</div>
this is my app.component.css code
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* Chat Box Section */
.chat-box{
width: 500px;
height: 550px;
background-color: #fff;
overflow: hidden;
border-radius: 10px;
position: relative;
overflow-y: scroll;height: XX px
}
.client{
height: 70px;
background-color: #77b3d4;
padding: 15px;
text-align: center;
}
.client, h2{
color: white;
}
/* Chat Section */
.chats{
width: 100%;
padding: 0 17px;
color: #fff;
position: relative;
font-size: 0.9em;
list-style-position: unset;
}
.client-chat{
width: 60%;
word-wrap: break-word;
background-color: #4f5d73c7;
padding: 7px 10px;
border-radius: 10px 10px 10px 0px;
margin: 10px 0px;
}
.my-chat{
width: 60%;
word-wrap: break-word;
background-color: #77b3d4c7;
padding: 7px 10px;
border-radius: 10px 10px 0px 10px;
margin: 5px 0px 5px auto;
}
/* Input Section */
.chat-input{
display: flex;
align-items: center;
width: 500px;
height: 65px;
background-color: #fff;
padding: 15px;
overflow: hidden;
position: fixed;
bottom: 0;
margin-top: 20px;
}
.chat-input input{
width: calc(100% - 40px);
height: 100%;
background-color: #4f5d7321;
border-radius: 45px;
color: #000;
font-size: 1.2em;
padding: 0 15px;
border: none;
}
#send-btn{
width: 50px;
height: 30px;
/* background-color: transparent; */
margin-left: 3px;
cursor: pointer;
}
this is my nodejs backend code
const app = require('express')();
const httpServer = require('http').createServer(app);
const io = require('socket.io')(httpServer, {
cors: {origin : '*'}
});
const port = process.env.PORT || 3000;
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('message', (message) => {
io.emit('message', `${socket.id.substr(0, 2)} said--${message}`);
});
socket.on('disconnect', () => {
console.log('a user disconnected!');
});
});
httpServer.listen(port, () =>
console.log(`listening on port ${port}`));
This is the screenshot of my code response when i display message i shows two time
Please anyone can solve this problem thanks in advance
In your template you have the following
<div class="chats" *ngFor="let message of messageList">
<div *ngIf="message" class="client-chat">{{message}}</div>
<div *ngIf="message" class="my-chat">{{message}}</div>
</div>
so both client-chat and my-chat will always appear since message is always true (it s the content of the message). You will need a way to know if a message come from yourself or from someone else.
Simple solution would be :
Use socket.id and when sending a message to BE, you send the message + the id.
The BE will then broadcast that message with the id.
In your clients, you will need to check
if the message come from the same socketId we are using, then it is our message so use my-chat
if the message come from a socket that is not ours, then display it as client-chat
then just assign a boolean to the message based on this, self:true if it's our message and false if not
and you simply update
<div class="chats" *ngFor="let message of messageList">
<div *ngIf="!message.self" class="client-chat">{{message}}</div>
<div *ngIf="message.self" class="my-chat">{{message}}</div>
</div>
EDIT :
So, this is a quickly made draft, you should really find the best implementation that suit your case.
you could, In your current BE :
socket.on('message', (message) => {
io.emit('message', `${socket.id.substr(0, 2)} said--${message}`);
});
You only send 2 char of the socketId. you can send it all with
socket.on('message', (message) => {
io.emit('message', `${socket.id} said--${message}`);
});
you can then in your FE just recover the sockedId by retrieving it from inside the string.
so you could do use
const socketId = message.split(' said--')[0]
and compare
socked.id === socketId
My etcd instance is running locally and I can perform get and set using the cli
// set
etcdctl set /services/myservice "{\"hostname\": \"127.0.0.1\", \"port\": 3000}"
//get
etcdctl get services/myservice
// results in -> {"hostname": "127.0.0.1", "port": 3000}
but when I use the node-etc module
var Etcd = require('node-etcd');
var etcd = new Etcd(['http://localhost:2379', 'http://localhost:4001']);
etc.get('services/myservice', { wait: true}, function (err, value){
console.log(err, value);
});
I get value is HTML (see below) instead of the same result as the cli. This was working a few weeks ago so I am not sure if I have
I also find that when I don't include hosts and just use new Etcd() I get an internal HTML page with references to proxy issues: "The requested website is blocked by [insert company name] Proxy due to potential malicious activity or other security reasons."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-adblockkey="MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKrfIMFkSaoTSqKmC+BrghK0CpDHc0MuVzmMHin8LIORhpXbped+iYhSnZurWnEO0zcKcVIrzp026LVc5pMB9bUCAwEAAQ==_mHzvOc3GBNo9sxVki+5Fe+E9GsbiT2+mBIEtU+yAIW6jw6Uds6VUD5RSkqMfuUSrcw4AYCrFOWaaWSRGDzU8pw==">
<head>
<script type="text/javascript">
var abp;
</script>
<script type="text/javascript" src="http://www.http.com/px.js?ch=1"></script>
<script type="text/javascript" src="http://www.http.com/px.js?ch=2"></script>
<script type="text/javascript">
function handleABPDetect() {
try {
var imglog = document.createElement("img");
imglog.src = "http://www.http.com/rg-logabpstatus.php?a=WVpqOEdZZldDTWo4VWF0M0pNa1pBek0xQnE1WVlqR2VaQ0Frd0V4TUxmcDAvOFN2WnhHYS8weFFEeTZTRHlleTM0UFk3UDhzemxqSWFRdXlFdXpIUGc9PQ==&b=" + abp;
document.body.appendChild(imglog);
} catch (err) {}
}
try {
window.onload = handleABPDetect();
} catch (err) {}
</script>
<title>http.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable = no">
<style type="text/css">
* {
margin: 0;
padding: 0
}
a {
text-decoration: none;
outline: none
}
a:hover {
text-indent: 0;
cursor: pointer
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0
}
* html .clearfix {
zoom: 1
}
*:first-child+html .clearfix {
zoom: 1
}
body {
font-family: Arial, Helvetica, sans-serif;
background: url(http://c.rmgserving.com/rmgpsc/7867/body-bg.gif) 0 0 repeat #000
}
/*.arrows{background:url(http://b.rmgserving.com/rmgpsc/7867/arrows.jpg)}*/
#main-wrap {
background: url(http://a.rmgserving.com/rmgpsc/7867/header-bg.jpg) top center no-repeat;
background-size: 100% 100px
}
.container {
width: 960px;
margin: 0 auto
}
.header {
height: 100px
}
/*commented for new design */
/*.leftblk{float:left; overflow:hidden}
.leftblk img{float: left; margin-top: 23px; padding-right: 15px;}*/
/*.domain_name{float:left; line-height:100px; font-size:26px; font-weight:normal; color:#fff}*/
.searchbox {
float: right;
width: 410px;
* width: 420px;
_width: 420px;
height: 28px !important;
padding-top: 2px;
margin-top: 35px;
/*padding-left:33px;background:url(http://d.rmgserving.com/rmgpsc/7868/srch-bg-caf2.gif) 0 0 no-repeat*/
}
.content {
padding-bottom: 10px;
background: #202020
}
/**RESPOSIVE CHANGES MADE HERE**/
.domain_name {
line-height: normal;
font-size: 26px;
font-weight: normal;
color: #fff;
margin-top: 35px
}
.leftblk {
float: left;
width: 39%;
word-wrap: break-word;
background: url(http://c.rmgserving.com/rmgpsc/7867/logo1.png) no-repeat center left;
padding-left: 70px;
height: 100px;
overflow: hidden;
}
.frt_arr {
float: left;
width: 30%;
height: 425px;
background: url(http://d.rmgserving.com/rmgpsc/7983/frst_arr.jpg);
background-position: 10px 70px;
background-repeat: no-repeat;
background-size: 90%
}
.lst_arr {
float: left;
width: 30%;
height: 425px;
background: url(http://b.rmgserving.com/rmgpsc/7983/last_arr.jpg);
background-position: 0px 70px;
background-repeat: no-repeat;
background-size: 90%
}
.kwd_bloack {
float: left;
width: 40%;
margin-top: 74px
}
/**RESPOSIVE CHANGES END HERE**/
.bottom_bg {
height: 44px;
/*background:#181818; */
margin-top: 34px
}
.bottom_rs {
width: 960px;
height: 44px;
overflow: hidden;
margin: 0 auto;
position: relative
}
#bot_rs {
padding-top: 9px
}
.separator {
position: absolute;
top: 0;
left: 156px;
width: 5px;
height: 44px;
border-left: 2px solid #282828;
background: url(http://a.rmgserving.com/rmgpsc/7867/sep-arw.gif) center center no-repeat
}
.footer-nav {
width: 100%;
height: 74px;
text-align: center;
color: #c0c0c0;
}
.footer-nav a {
font-size: 12px;
line-height: 74px;
color: #c0c0c0;
padding: 0 5px;
text-decoration: underline
}
.footer-nav a:hover {
text-decoration: none
}
.inquire {
text-align: right;
padding-top: 10px;
color: #fff
}
.inquire a {
font-size: 12px;
font-weight: normal;
color: #fff
}
.sale-msg {
background: #fff;
color: #4b4b4b;
text-align: center;
font-size: 14px;
width: 100%;
top: 0;
left: 0
}
.sale-msg a {
text-decoration: none;
color: #079ce9;
font-size: 14px;
}
.sale-msg a:hover,
.bottom_rs ul li a:hover,
.mid_rs ul li a:hover,
.inquire a:hover {
text-decoration: underline
}
#media not all and (min-width: 970px) {
.container {
width: 95%
}
.bottom_bg {
display: none
}
.footer-nav a {
line-height: 45px
}
}
#media not all and (min-width: 840px) {
.frt_arr {
display: none
}
.lst_arr {
display: none
}
.kwd_bloack {
float: none;
width: 95%;
margin: 0 auto;
padding-top: 10px
}
.leftblk {
float: none;
height: 50px;
background-size: 35px;
padding-left: 50px;
width: auto
}
.domain_name {
line-height: normal;
font-size: 20px;
margin-top: 0;
padding-top: 15px
}
.searchbox {
float: none;
margin-top: 10px;
padding-top: 0;
width: auto;
}
}
</style>
<script type="text/javascript" src="http://www.google.com/adsense/domains/caf.js"></script>
</head>
<body onload="" onunload="" onBeforeUnload="">
<noscript>
<meta http-equiv="refresh" content="0;url=http://www.http.com/rg-erdr.php?_rpo=t ntZzFFI&_rdm=9f1NJXf43BJvmfNf4.JvV&p=J1c4gcvmfN9ffFGoFgXoYVa%7C%40%7CbzGzTE%2C5f95zbT%2C5f95Et%7C%40%7CX55g.JvV%7C%40%7C%7C%40%7C%7C%40%7CZzbHzEZHE%7C%40%7CzHZZFTH%7C%40%7CK-%7C%40%7C19c4NW4cGFHzTEtTEGZGzTbT%7C%40%7Ct+nh8llbj%7C%40%7Ct+7zFZKFH&ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO&t=gnojs" />
<center>
<p style="padding:1em; font-size:1.5em;">For search results please CLICK HERE.</p>
</center>
</noscript>
<script type="text/javascript" language="javascript">
function __gpup(url, height, width, name) {
sw = window.open(url, name, 'height=' + height + ',width=' + width + ',location=no,toolbar=0,resizable=1,scrollbars=1');
if (window.focus) {
sw.focus()
};
return false;
};
</script>
<script text="text/javascript">
var design = {
'pageOptions': {
'pubId': '',
'resultsPageBaseUrl': '',
'fontFamily': 'arial',
'hl': 'en',
'maxTermLength': 29,
'adtest': 'on',
'clicktrackUrl': '',
'fontFamilyAttribution': 'arial',
'type': 'pageoptions',
'pageLoadedCallback': function(requestAccepted, status) {
document.body.style.visibility = 'visible';
if (!requestAccepted) {}
}
},
'searchboxBlock': {
'container': 'searchbox',
'type': 'searchbox',
'fontSizeSearchInput': 16,
'fontSizeSearchButton': 13,
'widthSearchInput': 215,
'colorSearchButton': '#e2e2e2',
'hideSearchInputBorder': false,
'hideSearchButtonBorder': false
},
'mainrs': {
'container': 'main_rs',
'type': 'relatedsearch',
'colorBackground': 'transparent',
'number': 6,
'fontSizeTitle': 19,
'titleBold': true,
'colorTitleLink': '#079ce9',
'noTitleUnderline': false,
'lineHeightTitle': 30,
'fontFamily': 'arial',
'horizontalAlignment': 'center',
'fontSizeAttribution': 13,
'colorAttribution': '#ababab',
'attributionBold': true,
'attributionUppercase': false,
'attributionSpacingBelow': 36,
'rolloverLinkUnderline': false,
'rolloverLinkColor': '#00c800',
'colorAdSeparator': '#202020'
}
};
</script>
<div id="main-wrap" class="clearfix">
<div class="container clearfix">
<div class="header clearfix">
<div class="leftblk">
<!-- <img src="http://c.rmgserving.com/rmgpsc/7867/logo1.png" /> -->
<h3 class="domain_name">http.com</h3>
</div>
<div class="searchbox clearfix" id="searchbox"></div>
</div>
<div class="content clearfix">
<div class="arrows frt_arr"></div>
<div class="kwd_bloack clearfix" id="main_rs"></div>
<div class="arrows lst_arr"></div>
</div>
</div>
<div class="bottom_bg clearfix">
<div class="bottom_rs clearfix">
<!--<span class="separator"></span>-->
</div>
</div>
<div class="footer-nav">
Privacy Policy </div>
</div>
<script type="text/javascript" language="javascript">
window._debug = false;
window._dumpdata = false;
var _cflp = true;
var pgld = true;
var totRS = -1;
var cntRS = 0;
var _cfstc = false;
var _cfblocker = true;
var _cfrg = true;
var _cfHelp = _cfHelp || {};
_cfHelp.design = design || {};
_cfHelp.servVars = {
"webadfl": "webads.php",
"_clhdl": "http:\/\/www.http.com\/rg-cltrack.php?&gr=%5B%7Crdr_url%7C%5D&gm=1WHI0lwrG0Sxkx4PsD8qyCOUd1dkaI2X1l8SGG1fMSd7bfeWMBF%2FyegsqR%2BZliS%2FkmMLg273bT8VsQ1oofKDtwu2BLulOOE9e9f%2FGbKVB3y9mwzTRLUiokCVqtb5Zk84C2EVcNaF2G3r9Bp3RsH1xfXrZC%2BE8YGoveyKL4ONQKcLbTlODzh%2BgHyFxmaFdMqH&gc=11101851242258318844884&gi=XYb9MaQozttVcq86LfylD8RNPuvlew8QArHjQzucy26g%2BlAY%2F2uHYh%2BA6ff50kcc1PxTBiLUWCU4jHCv3wduaWHfl%2Fk8mkRKtWu8EB0jglLzw7eeSqi3ynxhbG7655Fy%2FLKMke6nBiTt%2FuiCvqlrvF1W%2F0MGzePy07JWvEsPuPqNBujvQaw3gGby3VkjIxfm2atlkRoPbyOyKYholPIgVyyBcIBJQvM3kSCiRXOyaMpxjTprto%2B0LbFQmRT0%2Bv05GchdCqw0KwcBJr1GshmWISk5vXG28qmhuRBFtwmFZTdpEHObgOZuOhjtcRKzp6QcLHJxeH43ucmzlzBBC8rUhA%3D%3D",
"kchst": "http:\/\/www.http.com\/",
"kcpg": "render",
"kcprm": "ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO&gqsg=4OVo54jg6Fc8v4dgaRWvLlUoQfiT9l0g4KypdpyKIkp3XttitvahDJPyd8JV8AMP&maxads=0&gerf=NIVtBZ66fMb06L%2FzgSYcSUpDtBcVFLddp21rUKg8Zvs%3D&wait=true",
"jtchdl": "0",
"lkwtkn": null,
"qry": null,
"cntry": "IE",
"prvid": 1566375,
"lgky": "VFJIcUJEQUZtMGQ3dVY0amZaMmFIVi8vL2g2WUVmRkQxNVp6eEJRcSs1WFl3K3cvZFFISS9aN1Y4NE1KamNIUi95TW04Q3p6ek9RejR1N1pRemlJS1hORjIzNEF2Z3d3TGkyUGhGNkJxREdyRDJLNzZoWVMraXd0cFZGK1hiWTY5aGNYRTlmOHlDa3E5bmpLTHRtelJ3PT0%3D",
"_aftrprss": "",
"wclhdl": "http:\/\/www.http.com\/webclk?&gr=%5B%7Crdr_url%7C%5D&gm=N3DjGjxerDa%2B8Ln3%2B884CDaIWdGzXLcE6PGovrvm8cwEqFKj9%2FsSAw13RemOENdu59z53RIAX7qKedB%2BbC7k6lI6gFbOxQR7qkhujpZqsJMhUo0JnsgwBv6eY8R4QxT34RDgzTHG7pSdzqCdYGLMkjkrWeoByyf1I3drNmqLJoXF8CRTdNMoZwb5HxP8G2KL&gc=11101851242258318844501&gi=3asGzSvNXUezIegH6SkVMB9oHMTe%2BRtyB0XjQzqrg%2BegxXIIXBBR%2FNpmg%2FEpOC3SbbpbaUmlcSRdngRk3viiaUqqjkydC5SRcNAQIHAVCSz4CcvOsJgD4kJKepiaVN2MkCXSlbZfRbnV4Lj3QWLNCEpoUpJaD8GoKU2ZiKd%2B2wDKToaj236za8yEZZnAejv7CqvZi7bAnoT7LFHAT4YfVQYDvpwbpObRothY86AABfVVWr%2BDuudu2Z1HgnO7kRUJx945jHKd%2BHgj7szCxsb6xBb7wBlUblacTda5uwQKPLtiF5n7ChXCCJTf%2BYsC%2FDDegcmi71Z8FBC6SLSZ%2FYvsJQ%3D%3D",
"is_webad_enabled": 0,
"loaderimage": "http:\/\/c.rmgserving.com\/rmgisc\/loader.gif",
"_afdad": 1,
"noredir": 0,
"erpub": "oversee11_3ph_adult_xml",
"erch": "372",
"erpubcln": "ca-dp-oversee11_3ph_xml",
"erchcln": "000307",
"ghu": "http:\/\/www.http.com\/rg-erdr.php?_rpo=t ntZzFFI&_rdm=9f1NJXf43BJvmfNf4.JvV&p=J1c4gcvmfN9ffFGoFgXoYVa%7C%40%7CbzGzTE%2C5f95zbT%2C5f95Et%7C%40%7CX55g.JvV%7C%40%7C%7C%40%7C%7C%40%7CZzbHzEZHE%7C%40%7CzHZZFTH%7C%40%7CK-%7C%40%7C19c4NW4cGFHzTEtTEGZGzTbT%7C%40%7Ct+nh8llbj%7C%40%7Ct+7zFZKFH&ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO"
};
_cfHelp.newOpts = {
"pageoptions": {
"kw": "http",
"pubId": "dp-oversee32_3ph_xml",
"channel": "012174,test107,test49",
"hl": "",
"adtest": "off",
"resultsPageBaseUrl": "http:\/\/www.http.com\/?ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO&gqsg=4OVo54jg6Fc8v4dgaRWvLlUoQfiT9l0g4KypdpyKIkp3XttitvahDJPyd8JV8AMP&maxads=0&gerf=1NwSv6zgpkznlToCcC1LUPxAge73x0kzNUyoFwPpLQw%3D&wait=true",
"clicktrackUrl": "http:\/\/www.http.com\/rg-cltrack.php?&gr=http%3A%2F%2Fgoogle.com%2F%3FRMGcaf%261437578625&gm=lCHzRGQVmF5GbI%2FoJNvHO9F0H1pK6b4imVg4sD83gr0zwhCg7kUY7A5JisFIua0ovWZYB4g4CbZlK6DDWhXlYS%2FoGwafEe2w6vLAAhtarOqSrags%2FXIb7w%2BHM0BEJgeyKmMXhVQya9xYRoVUupKo7SfWKOP26QW4BeaSRA7pvaleohDknqEJ8irgK41FOPBr&gc=11101851242258318844252&gi=dqJeJ2LIBm6EoVjrQxF%2FslKeVO2MMfAIGz5LwKTbfKTDn9L7haFS7W3vKNwbjSGhC5JthqkexETQM8mEun%2F4M5TCzM0Vphb237zGYUpoBtB1%2BdaJoSRcYUFKnr9lF6i32soKngUvevO7DHx9BHSz7sCMXYPLkJicrRb7WxfYNRWz0plNCCbrW8HYaPbhclR9gVbhSwIUdzpMjwGFrNyh%2B9iqRYF%2BX0wFzLunKbgTnLdmXJuP0Vm%2BjkU%2BC4rprcocV7pcHhlR0%2FKP2vHSKAlWTPcuCA9P04LbPqttMcdlol%2Fpm%2BAeIg79dx%2Bb28yVLKBEpMifhq6%2BT%2B2LndQdLFX%2FCoMvHjee%2BMfVwkRgY8%2F9hqFI%2B9UvBLgcgjCtTYSruCn7",
"domainRegistrant": "as-drid-2351749742621707",
"optimizeTerms": false,
"terms": "[\"Domain Registration\",\"Network Monitoring\",\"Email Hosting\",\"Website Hosting\",\"Network Monitoring Software\",\"High Speed internet\",\"Cable Internet\",\"Broadband Internet\",\"Web Security\",\"Dial-Up Internet\",\"Wireless Internet Providers\",\"Unlimited Broadband\",\"Internet Speed Check\",\"Compare Broadband\",\"Cheap Internet Service\",\"Best Broadband Deals\",\"Internet Solutions\",\"Internet Music\",\"Internet Help\",\"Internet Telephony\",\"Business Internet Providers\",\"Broadband Availability\",\"Prepaid Wireless Internet\",\"Internet Florists\",\"Mobile Wireless Internet\"]",
"uiOptimize": false,
"domainName": "http.com"
},
"relatedsearch": {
"adLoadedCallback": function(cnm, ld) {
if (pgld && !ld && _cfrg && !_cfstc && _cflp) {
cntRS++;
if (cntRS >= totRS && totRS != -1) {
window.location = "http://www.http.com/?_stc_=1"
}
}
}
},
"textads": {
"adLoadedCallback": function(cnm, ld) {}
},
"imagead": {
"adLoadedCallback": function(cnm, ld) {}
},
"ads": {
"adLoadedCallback": function(cnm, ld) {}
}
};
_cfHelp.newOpts.pageoptions["pageLoadedCallback"] = function(requestAccepted, status) {
this.onPageLoad(requestAccepted, status);
_cfblocker = false
};
try {
if (abp) {
_cfHelp.newOpts.pageoptions['channel'] = _cfHelp.newOpts.pageoptions['channel'] + ',test101'
}
} catch (e) {}
</script>
<script type="text/javascript" src="http://a.rmgserving.com/rmgdsc/newcafv2.js?1.1"></script>
</body>
</html>
I'm using jquery plugin from this site https://subinsb.com/html5-record-mic-voice and I have trouble with making audio recording stop after 90 sec
here is code, I'm not very good in JS, so thanks everyone who will help
var recLength = 0,
recBuffersL = [],
recBuffersR = [],
sampleRate;
this.onmessage = function(e) {
switch (e.data.command) {
case 'init':
init(e.data.config);
break;
case 'record':
record(e.data.buffer);
break;
case 'exportWAV':
exportWAV(e.data.type);
break;
case 'getBuffer':
getBuffer();
break;
case 'clear':
clear();
break;
}
};
function init(config) {
sampleRate = config.sampleRate;
}
function record(inputBuffer) {
recBuffersL.push(inputBuffer[0]);
recBuffersR.push(inputBuffer[1]);
recLength += inputBuffer[0].length;
}
function exportWAV(type) {
var bufferL = mergeBuffers(recBuffersL, recLength);
var bufferR = mergeBuffers(recBuffersR, recLength);
var interleaved = interleave(bufferL, bufferR);
var dataview = encodeWAV(interleaved);
var audioBlob = new Blob([dataview], {
type: type
});
this.postMessage(audioBlob);
}
function getBuffer() {
var buffers = [];
buffers.push(mergeBuffers(recBuffersL, recLength));
buffers.push(mergeBuffers(recBuffersR, recLength));
this.postMessage(buffers);
}
function clear() {
recLength = 0;
recBuffersL = [];
recBuffersR = [];
}
function mergeBuffers(recBuffers, recLength) {
var result = new Float32Array(recLength);
var offset = 0;
for (var i = 0; i < recBuffers.length; i++) {
result.set(recBuffers[i], offset);
offset += recBuffers[i].length;
}
return result;
}
function interleave(inputL, inputR) {
var length = inputL.length + inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length) {
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function floatTo16BitPCM(output, offset, input) {
for (var i = 0; i < input.length; i++, offset += 2) {
var s = Math.max(-1, Math.min(1, input[i]));
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}
function writeString(view, offset, string) {
for (var i = 0; i < string.length; i++) {
view.setUint8(offset + i, string.charCodeAt(i));
}
}
function encodeWAV(samples) {
var buffer = new ArrayBuffer(44 + samples.length * 2);
var view = new DataView(buffer);
/* RIFF identifier */
writeString(view, 0, 'RIFF');
/* RIFF chunk length */
view.setUint32(4, 36 + samples.length * 2, true);
/* RIFF type */
writeString(view, 8, 'WAVE');
/* format chunk identifier */
writeString(view, 12, 'fmt ');
/* format chunk length */
view.setUint32(16, 16, true);
/* sample format (raw) */
view.setUint16(20, 1, true);
/* channel count */
view.setUint16(22, 2, true);
/* sample rate */
view.setUint32(24, sampleRate, true);
/* byte rate (sample rate * block align) */
view.setUint32(28, sampleRate * 4, true);
/* block align (channel count * bytes per sample) */
view.setUint16(32, 4, true);
/* bits per sample */
view.setUint16(34, 16, true);
/* data chunk identifier */
writeString(view, 36, 'data');
/* data chunk length */
view.setUint32(40, samples.length * 2, true);
floatTo16BitPCM(view, 44, samples);
return view;
}
//------I guess problem is below--------------------------------------------
function restore() {
$("#record,#live").removeClass("disabled");
$(".one").addClass("disabled");
$.voice.stop();
}
$(document).ready(function() {
$(document).on("click", "#record:not(.disabled)", function() {
$("#ex1").css({
opacity: 1
});
$("#prepare").animate({
backgroundPosition: '0px,0px,0px,0px'
}, 1000).queue(function() {
$("#rec-progress").animate({
backgroundPosition: '0px,0px,0px,0px'
}, 5000);
/*I need to stop recording somewere here, I tried put .delay(30000).stop,
and things like that, but there were wrong ideas*/
elem = $(this);
$.voice.record($("#live").is(":checked"), function() {
elem.addClass("disabled");
$("#live").addClass("disabled");
$("#stop,#play,#download").removeClass("disabled");
});
});
});
$(document).on("click", "#stop:not(.disabled)", function() {
restore();
});
$(document).on("click", "#play:not(.disabled)", function() {
$.voice.export(function(url) {
$("#audio").attr("src", url);
$("#audio")[0].play();
}, "URL");
restore();
});
$(document).on("click", "#download:not(.disabled)", function() {
$.voice.export(function(url) {
$("<a href='" + url + "' download='MyRecording.wav'></a>")[0].click();
}, "URL");
restore();
});
});
* {
margin 0px;
padding: 0px;
}
h2 {
font-family: Tahoma, arial;
font-size: 2em;
width: 500px;
display: block;
margin-left: 50%;
left: -250px;
position: relative;
text-align: center;
}
body {
background: grey;
}
#progress-bar {
height: 100px;
width: 00px;
margin-left: 50%;
z-index: 10;
left: -350px;
position: relative;
}
#prepare {
background: url(https://disk.yandex.ru/preview/?id=/disk/bar.png&size=800x);
z-index: -10;
overflow: hidden;
height: 100px;
background-position: -610px, 0px, 0px, 0px;
background-repeat: no-repeat;
width: 700px;
position: absolute;
top: 0px
}
#rec-progress {
background: url(https://disk.yandex.ru/preview/?id=/disk/rec.png&size=800x);
z-index: -5;
overflow: hidden;
height: 100px;
background-position: -610px, 0px, 0px, 0px;
background-repeat: no-repeat;
width: 700px;
position: absolute;
top: 0px
}
#interface {
width: 596px;
height: 100px;
margin-left: 50%;
left: -315px;
position: relative;
}
#content {
height: 1000px;
}
#ex1 {
background: url(ex1/type1.bmp);
width: 100%;
min-width: 1340px;
min-height: 200px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
}
.button {
width: 120px;
display: inline-block;
vertical-align: middle;
margin: 0px auto;
padding: 5px 12px;
cursor: pointer;
outline: none;
font-size: 13px;
text-decoration: none !important;
text-align: center;
color: #fff;
background-color: #4D90FE;
background-image: linear-gradient(top, #4D90FE, #4787ED);
background-image: -ms-linear-gradient(top, #4D90FE, #4787ED);
background-image: -o-linear-gradient(top, #4D90FE, #4787ED);
background-image: linear-gradient(top, #4D90FE, #4787ED);
border: 1px solid #4787ED;
box-shadow: 0 1px 3px #BFBFBF;
}
a.button {
color: #fff;
}
.button:hover {
box-shadow: inset 0px 1px 1px #8C8C8C;
}
.button.disabled {
box-shadow: none;
opacity: 0.7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://lab.subinsb.com/projects/jquery/core/jquery-2.1.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="cdn/recorder.js"></script>
<script src="http://lab.subinsb.com/projects/jquery/voice/jquery.voice.min.js"></script>
<link rel="stylesheet" type="text/css" href="cdn/main.css">
<script src="cdn/jquery.backgroundpos.min.js"></script>
<script src="cdn/record.js"></script>
<style src="cdn/main.css"></style>
<title>Title</title>
</head>
<body>
<div id="content">
<h2>Example</h2>
<div id="progress-bar">
<img src="https://disk.yandex.ru/preview/?id=/disk/progress.png&size=800x">
<div id="rec-progress"></div>
<div id="prepare"></div>
</div>
<div id="interface">
<a class="button" id="record">Start</a>
<a class="button disabled one" id="stop">restart</a>
<a class="button disabled one" id="play">listen</a>
<a class="button disabled one" id="download">save</a>
</div>
<div id="ex1"></div>
</div>
<audio controls src="" id="audio"></audio>
</body>
</html>
i'm using this node.js code:
var server = require("socket.io").listen(6666);
server.sockets.on("connection", function(message)
{
message.on("newMessage", function(data)
{
server.sockets.emit("sendEvent", data);
});
});
and this html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online chat</title>
<style>
body
{
color: #333;
background: #333;
font-family: "Helvetica", Arial;
font-size: 14px;
text-align: center;
}
.container
{
background: #ccc;
border-radius: 1em;
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
text-shadow: 5px 5px 5px rgba(0,0,0,0.5);
margin: 1em auto;
padding: 1em;
width: 90%;
}
input
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
}
span
{
display: block;
font-size: 12px;
margin: 1em auto;
padding: 0.5em;
width: 95%;
text-align: left;
}
</style>
<script src="/resources/js/socket.io.js"></script>
<script type="text/javascript">
<!--
var websocket = io.connect("http://localhost:6666");
window.onload = function()
{
websocket.on("sendEvent", function(data)
{
var chat = document.getElementById('zchat');
var span = document.createElement('span');
var txt = document.createTextNode(data);
span.appendChild(txt);
if(chat.hasChildNodes())
chat.insertBefore(span, chat.firstChild);
else
chat.appendChild(span);
});
var form = document.getElementById('zform');
var message = document.getElementById('zmessage');
form.onsubmit = function(e)
{
websocket.emit("newMessage", message.value);
return false;
};
};
//-->
</script>
</head>
<body>
<div class="container">
<form id="zform">
<label>Message: </label>
<input type="text" name="zmessage" id="zmessage" placeholder="Please insert message" required />
<input type="submit" />
</form>
</div>
<div id="zchat" class="container">
</div>
</body>
</html>
works fine with normal browsers but with i probe with samsung's bada's "dolfin" browser based on webkit and it doesn't work, can someone probe it with another mobile browser? thanks :)
server.js
//...
var server = require("socket.io").listen(6969);
//...
index.html
//...
var websocket = io.connect("http://192.168.100.103:6969");
//...
i think the SATAN's port is evil for this, jajajaja and NEVER use localhost, always the PC's public IP