이슬 / 2017-OpenSourceSW

Go to a project
Toggle navigation Toggle navigation pinning
이슬
6cf11ebf 0 parents

submit

Inline Side-by-side
Showing 4 changed files with 277 additions and 0 deletions
node_modules
.DS_Store
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chat</title>
<style>
body {background-image: url("https://images.unsplash.com/photo-1449168013943-3a15804bb41c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9a5f9deea2b4c2c1eeaf84265913f20f");}
.chat_texts{ width: 95%; height: 300px; }
.text_chat{width: 40%; padding-top: 1%; float: left;}
.name{ width: 15%; padding-top: 4%;}
.message{ width: 80%; }
.chat{ width: 15%; }
.player{float: right; padding-right: 5%;}
.buttons{padding-top: 2%; padding-left: 7%;}
.top_wrap{overflow: hidden; padding-left: 7%; padding-bottom: 10%;}
#title{font-size: 200%; text-align: center; margin-top: 2%;}
</style>
</head>
<body>
<div class="top_wrap">
<div id = "title">
오픈 노래방
</div>
<div id="name" class="name" type="text" readonly></div>
<div id="text_chat" class="text_chat">
<div>
<textarea id="chat_texts" class="chat_texts" readonly></textarea>
</div>
<form id="do_chat">
<input id="message" class="message" type="text">
<input type="submit" class="chat" value="chat"/>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var tag;
var socket = io();
var name;
var player;
var i=0;
var done = false;
$('#do_chat').on('submit', function(e){
socket.emit('send message', $('#name').html(), $('#message').val());
$('#message').val("");
e.preventDefault();
});
socket.on('receive message', function(msg){
$('#chat_texts').append(msg+"\n");
$('#chat_texts').scrollTop($('#chat_texts').innerHeight())
});
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
//videoId: 'kBd6yJWou80',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars:{
'autoplay':1,
'controls':0,
'disablekb':1,
'fs':0,
'rel':0,
'showinfo':0,
'modestbranding':1,
'listType':'search',
'list':name
}
});
//stopVideo();
}
function onYouTubeIframeAPIReady2(list) {
player = new YT.Player('player', {
height: '360',
width: '640',
//videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars:{
'autoplay':1,
'controls':0,
'disablekb':1,
'fs':0,
'rel':0,
'showinfo':0,
'modestbranding':1,
'listType':'search',
'list':list
}
});
//stopVideo();
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//onYouTubeIframeAPIReady2(name);
//setTimeout(stopVideo, 10000);
done = true;
}
/*else {
socket.emit('done',);
}*/
}
socket.on('play', function(g){
onYouTubeIframeAPIReady2(g);
});
function stopVideo() {
player.stopVideo();
}
function playVideo() {
player.playVideo();
}
socket.on('receive message list first', function(msg,list){
name = list;
$('#chat_texts').append(msg+"\n");
$('#chat_texts').scrollTop($('#chat_texts').innerHeight())
tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
socket.on('receive message list', function(msg){
$('#chat_texts').append(msg+"\n");
$('#chat_texts').scrollTop($('#chat_texts').innerHeight())
});
socket.on('change name', function(name){
$('#name').html(name);
});
</script>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" class="player"></div>
</div>
<div id="buttons" class="buttons">
<form id="search_button">
예약하기 - 곡명 : <input id="list_name" class="query" type="text">&ensp;<input type="submit" class="search_button" value="search"/>
</form>
</div>
<script>
$('#search_button').on('submit', function(e){
socket.emit('send list', $('#name').html(), $('#list_name').val());
$('#list_name').val("");
e.preventDefault();
});
</script>
</body>
</html>
{
"name": "socket.io_chatting",
"version": "1.0.0",
"description": "",
"main": "server.js",
"dependencies": {
"express": "^4.15.3",
"socket.io": "^1.7.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC"
}
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var wsock = require('wsock');
var Dequeue = require('dequeue')
global.navigator = {
userAgent: 'node.js'
};
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
app.get("/",function(req, res){
res.sendfile("client.html");
});
var count=1;
io.on('connection', function(socket){
console.log('user connected: ', socket.id);
var name = "anonymous#" + count++;
var lists = new Dequeue();
io.to(socket.id).emit('change name',name);
socket.on('disconnect', function(){
console.log('user disconnected: ', socket.id);
});
socket.on('send message', function(name,text){
var msg = name + ' : ' + text;
console.log(msg);
io.emit('receive message', msg);
});
socket.on('send list', function(name,list){
var temp = '[KY 금영노래방] '+list;
lists.push(temp);
console.log(lists);
var msg = name + '의 곡 - ' + list + '가 등록 되었습니다.';
console.log(msg);
if (lists.length==1)
{
io.emit('receive message list first', msg, temp);
}
else {
io.emit('receive message list', msg);
}
});
socket.on('done', function(){
var g=lists.shift();
io.emit('play',g);
});
});
http.listen('3000', function(){
console.log("server on!");
});