This chat application I'm working on as practice (being new to Node and Socket.IO) is doing well except for the fact that I can't get the server to broadcast messages to all the clients. I've checked for inconsistent variables (and may have created some while playing around, my apologies ;P) but it's not working? I'm confused because I'm not receiving any console errors or anything like that, making this incredibly hard to debug. Could it be that I'm running into my first encounter with how callbacks can end up nesting in an unwanted manner?
Anyway, here's some code:
App.js:
// Require dependencies
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
// Listen for connections
io.sockets.on('connection', function(client) {
console.log("Someone is connecting...");
client.on('join', function(name) {
client.set('nickname', name);
console.log(name+" has connected!");
client.broadcast.emit('connected', name + " has connected");
});
// Receive messages from the client and broadcast them to everyone
client.on('messages', function(data) {
client.get('nickname', function(err, name) {
client.broadcast.emit("chat", name + ": " + data);
});
});
});
// Without this line, the CSS will not work
app.use('/public', express.static(__dirname + '/public'));
// Route index.html to the root path
app.get('/', function(request, response) {
response.sendfile(__dirname + "/index.html");
});
// Listen for GET requests to the server
server.listen(3000);
console.log("Listening on port 3000");
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Chatapp</title>
<link rel="stylesheet" type="text/css" href="public/default.css"></link>
</head>
<body>
<h1 class="title">Chatapp</h1>
<div id="wrapper">
<div id="online">
</div>
<div id="body">
<div id="status"></div>
<div id="chat">
</div>
</div>
<div id="input">
<form id="chatform">
<input type="text" id="message"></input>
<input type="submit" id="send" value="Send!"></input>
</form>
</div>
<div class="clear"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// Wait until DOM is ready
$(document).ready(function() {
// Establish a connection to the server
var server = io.connect('http://localhost:3000');
// On submit, send the chat form message to the server, prevent default redirect and reset the chat form
$('#chatform').submit(function(e) {
e.preventDefault();
var message = $('#message').val();
server.emit('messages', message);
$('#chatform')[0].reset();
});
server.on('connect', function(data) {
nickname = prompt('What is your nickname?');
$('#status').html('Connected to Chatapp as ' +nickname);
server.emit('join', nickname);
});
server.on('connected', function(data) {
$('<p>'+data+'</p>').appendTo('#chat');
});
// Listen for messages broadcasted to every client by the server - this does not work for some reason.
server.on('chat', function(data) {
$(data).appendTo('#chat');
});
});
</script>
</body>
</html>
/public/default.css:
body {
margin: 0;
padding: 0;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
#wrapper {
margin: 0 auto;
width: 940px;
height: 500px;
padding: 0;
border: 1px solid #000;
}
#online {
float: left;
width: 188px;
height: 480px;
padding: 10px;
border-right: 1px solid #000;
background: #3d3d3d;
color: #eee;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
#body {
float: left;
width: 731px;
height: 439px;
padding: 0;
border-bottom: 1px solid #000;
}
#status {
color: #eee;
height: 30px;
border-bottom: 1px solid #000;
background: #3d3d3d;
padding-left: 10px;
line-height: 30px;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
#chat {
background: #c4f2eb;
height: 388px;
padding: 10px;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
#input {
float: left;
height: 60px;
width: 731px;
}
.clear {
clear: both;
}
h1.title {
text-align: center;
}
input#message {
float: left;
margin: 0;
width: 640px;
height: 58px;
border: none;
font-size: 28px;
padding-left: 10px;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}
input#message:focus {
border: none;
outline: none;
box-shadow: inset 1px 1px 3px #55ba57, inset -1px -1px 3px #55ba57;
}
input#send {
float: left;
background: #55ba57;
color: #fff;
border: none;
height: 60px;
margin: 0;
width: 81px;
border-left: 1px solid #000;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
input#send:hover {
background: #489949;
cursor: pointer;
}
input#send:active {
background: #1e7520;
}
OK, let's break this problem up into many little sub-problems ;)
When you say you can't log (or alert) data, at which point are you trying this? (Problem from your comments)
If this is in server.on('connect', function(data) {... you'll never get any data. The connect event is purely informational.
Both of these do not send the data back to the client who connected\chats.
client.broadcast.emit('connected', name + " has connected");
client.broadcast.emit("chat", name + ": " + data);
So if you want them printed in the same client window, you'll have to also client.emit directly under them, to send the message to the client window who caused the actions.
Edit: This is from the docs: Broadcasting means sending a message to everyone else except for the socket that starts it.
Your server broadcasts chat events, but your client is listening for messages events only. (FIXED)
Let me know if you have any other issues.
I would not call the sockets you created 'server' on the client and 'client' on the server. Makes it all a little confusing. ;)
Related
I'm building a video chat application using Node, Express, Socket.io, and WebRTC by following this tutorial: Link blog
So on my edge browser, after i enabled the video stream on my application and my webcam is activated, i noticed that when i right click on the video area (video element) and click on show all controls, i found that video player navigation bar is inverted.
Do you have any explication on why the nav bar is inverted? (check theses screenshots for inversed nav bar screenshot 1 & screenshot 2)
Below are my codes:
room.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>videoChatApp</title>
<link rel="stylesheet" href="style.css" />
<script src="/socket.io/socket.io.js"></script>
<script src="https://kit.fontawesome.com/c939d0e917.js"></script>
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<script>
const ROOM_ID = "<%= roomId %>";
</script>
</head>
<body>
<div class="header">
<div class="logo">
<h3>Video Chat</h3>
</div>
</div>
<div class="main">
<div class="main__left">
<div class="videos__group">
<div id="video-grid"></div>
</div>
<div class="options">
<div class="options__left">
<div id="stopVideo" class="options__button">
<i class="fa fa-video-camera"></i>
</div>
<div id="muteButton" class="options__button">
<i class="fa fa-microphone"></i>
</div>
</div>
<div class="options__right">
<div id="inviteButton" class="options__button">
<i class="fas fa-user-plus"></i>
</div>
</div>
</div>
</div>
<div class="main__right">
<div class="main__chat_window">
<div class="messages"></div>
</div>
<div class="main__message_container">
<input
id="chat_message"
type="text"
autocomplete="off"
placeholder="Type message here..."
/>
<div id="send" class="options__button">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
script.js:
let myVideoStream;
const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement("video");
myVideo.muted = true;
navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
})
.then((stream) => {
myVideoStream = stream;
addVideoStream(myVideo, stream);
});
const addVideoStream = (video, stream) => {
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
videoGrid.append(video);
});
};
server.js:
const express = require('express')
const app = express()
const { v4: uuidv4 } = require("uuid");
app.set('view engine', 'ejs')
app.use(express.static('public'));
app.get('/', (req, res) => {
res.redirect(`/${uuidv4()}`);
});
app.get("/:room", (req, res) => {
res.render("room", { roomId: req.param.room });
});
app.listen(3030, () => {
console.log('Server is runing on port 3030');
})
style.css:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
:root {
--main-darklg: #1d2635;
--main-dark: #161d29;
--primary-color: #2f80ec;
--main-light: #eeeeee;
font-family: "Poppins", sans-serif;
}
* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
height: 8vh;
position: relative;
width: 100%;
background-color: var(--main-darklg);
}
.logo > h3 {
color: var(--main-light);
}
.main {
overflow: hidden;
height: 92vh;
display: flex;
}
.main__left {
flex: 0.7;
display: flex;
flex-direction: column;
}
.videos__group {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
background-color: var(--main-dark);
}
video {
height: 500px;
border-radius: 1rem;
margin: 0.5rem;
width: 900px;
object-fit: cover;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.options {
padding: 1rem;
display: flex;
background-color: var(--main-darklg);
}
.options__left {
display: flex;
}
.options__right {
margin-left: auto;
}
.options__button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color);
height: 50px;
border-radius: 5px;
color: var(--main-light);
font-size: 1.2rem;
width: 50px;
margin: 0 0.5rem;
}
.background__red {
background-color: #f6484a;
}
.main__right {
display: flex;
flex-direction: column;
flex: 0.3;
background-color: #242f41;
}
.main__chat_window {
flex-grow: 1;
overflow-y: scroll;
}
.main__chat_window::-webkit-scrollbar {
display: none;
}
.main__message_container {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.main__message_container > input {
height: 50px;
flex: 1;
font-size: 1rem;
border-radius: 5px;
padding-left: 20px;
border: none;
}
.messages {
display: flex;
flex-direction: column;
margin: 1.5rem;
}
.message {
display: flex;
flex-direction: column;
}
.message > b {
color: #eeeeee;
display: flex;
align-items: center;
text-transform: capitalize;
}
.message > b > i {
margin-right: 0.7rem;
font-size: 1.5rem;
}
.message > span {
background-color: #eeeeee;
margin: 1rem 0;
padding: 1rem;
border-radius: 5px;
}
#video-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#showChat {
display: none;
}
.header__back {
display: none;
position: absolute;
font-size: 1.3rem;
top: 17px;
left: 28px;
color: #fff;
}
#media (max-width: 700px) {
.main__right {
display: none;
}
.main__left {
width: 100%;
flex: 1;
}
video {
height: auto;
width: 100%;
}
#showChat {
display: flex;
}
}
You are applying a 180 degree rotation to the element (i.e. mirroring it)
by using transform: rotateY(180deg) in your CSS file which also rotates the controls.
For WebRTC usage the common approach to solving this is not to use the build-in controls of the video element.
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
I'm making a chrome extension, and I need to make an infinite while loop in it, but whenever the while loop starts, the browser tab crashes. Is there any solution or other method I could use?
Why do you need an infinite loop? What are you trying to achieve?
There are other options like window.requestAnimationFrame(), setInterval or setTimeout that you could use inside a page to continuously do something without blocking it. For example:
const counterElement = document.getElementById('counter');
let counterValue = 0;
setInterval(() => {
counterElement.innerText = (++counterValue / 100).toFixed(2);
}, 10);
body {
margin: 48px 8px 8px;
font-family: monospace;
}
#counter {
position: fixed;
top: 0;
left: 0;
width: 100%;
line-height: 32px;
padding: 0 8px;
background: black;
color: white;
}
hr {
border: none;
border-top: 2px solid black;
margin: 32px 0;
}
button {
border: 2px solid black;
background: transparent;
padding: 8px 12px;
font-family: monospace;
cursor: pointer;
outline: none;
}
button:hover {
background: yellow;
}
button:active {
background: black;
color: white;
}
button:focus {
border: 3px solid black;
padding: 7px 11px;
}
<div id="counter">0</div>
Click around the page. See how everything still works?
<hr />
<button>BUTTON</button>
<button>BUTTON</button>
You could also consider a Web Worker depending on your needs.
I have developed a web application for mobile with Java+Spring, because of slow response i am now trying to implement the same thing on node.js, express.
I used bootstrap.css and styles.css for my site specific styles and a few overrides of bootstrap. In my old implementation everything worked currectly but right now on nodejs, All styles from bootstrap is applied currectly to my markup while all overrides from styles.css are ignored by chrome. Any idea what am i missing.
Here is example demostration of my problem
Some markup from html
<div class="row">
<ul id="tabs-menu" class="nav nav-tabs">
<li class="active">Bollywood</li>
<li>Western</li>
<li>Pakistani</li>
<li>Islamic</li>
</ul>
</div>
css properties as inspected by chrome
//from bootstrap
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
//from bootstrap
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
//from bootstrap
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
//from bootstrap
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
//from style.css
.nav>li>a {
color: #000;
background: #ddd;
}
//from style.css
.nav>li>a {
padding: 3px 1px 3px 1px; //ignored
margin-bottom: 1px;
margin-right: 1px; //ignored
border-radius: 0px; //ignored
font-size: 13px;
}
Problem is styles from style.css with //ignored comment at the end are ignored by chrom where as in my previous implementation exactly the same code worked perfectly.
here is my style.css
body {
min-height: 500px;
padding-top: 70px;
padding-bottom: 70px;
font-family: 'juice_light';
}
a
{
color:#CA4242;
}
a:hover
{
color:#B71B1B;
}
.navbar-default {
background-color: #fff;
border-color: #e7e7e7;
}
.navbar-header {
width:100%;
}
.navbar
{
min-height:65px;
}
#MyPlayQueue
{
float: right;
padding: 15px;
font-size: 14px;
line-height: 40px;
height: 20px;
color: #000;
font-weight: bold;
}
#MyPlayQueue
{
float: right;
padding: 20px 5px 0px 0px;
font-size: 14px;
line-height: 30px;
height: 20px;
color: #000;
font-weight: bold;
}
#MyPlayQueue:hover
{
color:#CA4242;
}
.row
{
padding-left: 4px;
padding-right: 4px;
padding-bottom:10px;
}
.nav>li>a {
padding:3px 1px 3px 1px;
margin-bottom: 1px;
margin-right: 1px;
border-radius: 0px;
font-size: 13px;
}
.tab-content>.active {
padding: 10px 0px;
}
.nav>li>a {
color: #000;
background:#ddd;
}
.nav-tabs {
border-bottom: 5px solid #D71921;
}
.nav-tabs>li.active>a
{
color: #fff;
background:#d71921;
cursor:pointer;
}
.nav-tabs>li.active>a:hover
{
color: #fff;
background:#D52737;
}
#sub-categories, #sub-menu
{
clear:both;
text-align: center;
padding: 10px 0px 0px;
}
p {
margin: 0 0 5px;
}
#font-face {
font-family: 'juice_light';
src: url('/fonts/juice_light-webfont.eot');
src: url('/fonts/juice_light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/juice_light-webfont.woff') format('woff'),
url('/fonts/juice_light-webfont.ttf') format('truetype'),
url('/fonts/juice_light-webfont.svg#juice_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'juice_regular';
src: url('/fonts/juice_regular-webfont.eot');
src: url('/fonts/juice_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/juice_regular-webfont.woff') format('woff'),
url('/fonts/juice_regular-webfont.ttf') format('truetype'),
url('/fonts/juice_regular-webfont.svg#juice_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#content
{
padding:0px 0px 70px;
}
#content .stub_holder
{
display: block;
width: 120px;
height: 120px;
background: -15px -10px url("../images/stub_image.png");
}
#content #albumStage
{
vertical-align:bottom;
display:block;
}
#content #albumStage .albumCover img
{
border:5px solid #eee;
width:100px;
}
#content #albumStage .info .albumCover
{
float:left;
}
#content #albumStage .info .albumInfo
{
padding-left:115px;
}
#content #albumStage .info .albumInfo .albumTitle
{
font-size:20px;
}
#content #albumStage .info .albumInfo .albumCategory
{
font-size:20px;
}
#content #albumStage .info .albumInfo .albumTracks
{
font-size:14px;
}
#content #albumStage #albumControls
{
clear:both;
display:block;
padding:10px 0px 10px 0px;
}
#content #albumStage #albumControls .albumControls
{
background:#D71921;
padding:5px;
border:3px solid #ccc;
color:#fff;
margin:3px 6px 3px 0px;
cursor:pointer;
}
#content ul#albums, #content ul#songs
{
list-style-type:none;
padding: 0px;
}
#content ul#songs
{
padding-left:0px;
width:100%;
}
#content ul#songs li.song, #content ul#songs li.song_end
{
padding:20px 5px 40px 5px;
border-top:1px solid #aaa;
display:block;
clear:both;
}
#content ul#songs li.song_end
{
text-align: center;
}
#content ul#songs li.song.alternate
{
background:#f2f2f2;
}
#content ul#songs li.song .streamControls img
{
padding-right: 3px;
width:25px;
}
#content ul#songs li.song .streamControls, #content ul#songs li.song .songDetail
{
float:left;
padding-right:5px;
}
#content ul#songs li.song .songDetail
{
max-width: 210px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#content ul#songs li.song .queueControls
{
padding-right: 5px;
float: right;
}
#content ul#albums li.album
{
float:left;
padding:3px;
height: 170px;
}
#content ul#albums li.album img
{
border : 5px solid #ddd;
width: 120px;
}
#content ul#albums li.album .albumTitle
{
display:block;
font-weight:bold;
padding-top:2px;
text-align:center;
width:120px;
}
#content ul#albums li.album a
{
color:#000;
}
#aEnd
{
clear: both;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
}
.loader
{
display:inline-block;
}
.load-progress {
width: 150px;
background-color: #aaa;
height: 5px;
}
.play-progress {
width: 0px;
background-color: #333;
height: 5px;
}
.row.footer
{
opacity:0.9;
position: fixed;
bottom: 0px;
padding:0px;
padding-top:5px;
margin:0px 0px 0px -15px;
height:70px;
width:100%;
background:#000;
}
#playListSeekBar, #playListControls
{
text-align:center;
}
#playListSeekBar, #playListControls img
{
padding-left:10px;
padding-right:10px;
}
#playListSeekBar, #playListControls img.control
{
cursor:pointer;
}
#playListSeekBar .timers
{
color:#aaa;
}
#playListSeekBar .timers#timeLeft
{
}
#playListSeekBar #controls_playList
{
padding-bottom: 3px;
}
additionally here is layout.jade if it helps understanding my question
doctype html
html
head
title= title
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width', initial-scale='1.0')
meta(name='author', content='Khushal Khan')
meta(name='description', content='Mobilink Streaming Web App')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='shortcut icon', href="/images/favicon.ico")
//
script(src='/javascripts/less-1.3.3.min.js')
//if lt IE 9
script(src='/javascripts/html5shiv.js')
script(type='text/javascript', src='/javascripts/jquery.min.js')
script(type='text/javascript', src='/javascripts/bootstrap.min.js')
script(type='text/javascript', src='/javascripts/scripts.js')
body
block content
Ok, a few things that I recognized:
First of all: Your first given example is not working probably because of your // comments.
// in CSS is not standard, so a few browser will misinterpret that.
Second: For me your example code works fine, besides these // problems.
Third: I believe your issue comes by first calling your individual style.css and that gets overwritten in part by that given bootstrap.css.
Please try this code below, where I changed the position of your linked css files:
doctype html
html
head
title= title
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width', initial-scale='1.0')
meta(name='author', content='Khushal Khan')
meta(name='description', content='Mobilink Streaming Web App')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='shortcut icon', href="/images/favicon.ico")
//
script(src='/javascripts/less-1.3.3.min.js')
//if lt IE 9
script(src='/javascripts/html5shiv.js')
script(type='text/javascript', src='/javascripts/jquery.min.js')
script(type='text/javascript', src='/javascripts/bootstrap.min.js')
script(type='text/javascript', src='/javascripts/scripts.js')
body
block content
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