이슬 / 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
1 +node_modules
2 +.DS_Store
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta charset="utf-8">
5 + <title>chat</title>
6 + <style>
7 + body {background-image: url("https://images.unsplash.com/photo-1449168013943-3a15804bb41c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9a5f9deea2b4c2c1eeaf84265913f20f");}
8 + .chat_texts{ width: 95%; height: 300px; }
9 + .text_chat{width: 40%; padding-top: 1%; float: left;}
10 + .name{ width: 15%; padding-top: 4%;}
11 + .message{ width: 80%; }
12 + .chat{ width: 15%; }
13 + .player{float: right; padding-right: 5%;}
14 + .buttons{padding-top: 2%; padding-left: 7%;}
15 + .top_wrap{overflow: hidden; padding-left: 7%; padding-bottom: 10%;}
16 + #title{font-size: 200%; text-align: center; margin-top: 2%;}
17 + </style>
18 + </head>
19 + <body>
20 + <div class="top_wrap">
21 + <div id = "title">
22 + 오픈 노래방
23 + </div>
24 + <div id="name" class="name" type="text" readonly></div>
25 + <div id="text_chat" class="text_chat">
26 + <div>
27 + <textarea id="chat_texts" class="chat_texts" readonly></textarea>
28 + </div>
29 + <form id="do_chat">
30 + <input id="message" class="message" type="text">
31 + <input type="submit" class="chat" value="chat"/>
32 + </form>
33 + </div>
34 +
35 + <script src="/socket.io/socket.io.js"></script>
36 + <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
37 + <script>
38 + var tag;
39 + var socket = io();
40 + var name;
41 + var player;
42 + var i=0;
43 + var done = false;
44 +
45 + $('#do_chat').on('submit', function(e){
46 + socket.emit('send message', $('#name').html(), $('#message').val());
47 + $('#message').val("");
48 + e.preventDefault();
49 + });
50 +
51 + socket.on('receive message', function(msg){
52 + $('#chat_texts').append(msg+"\n");
53 + $('#chat_texts').scrollTop($('#chat_texts').innerHeight())
54 + });
55 +
56 +
57 + function onYouTubeIframeAPIReady() {
58 + player = new YT.Player('player', {
59 + height: '360',
60 + width: '640',
61 + //videoId: 'kBd6yJWou80',
62 + events: {
63 + 'onReady': onPlayerReady,
64 + 'onStateChange': onPlayerStateChange
65 + },
66 + playerVars:{
67 + 'autoplay':1,
68 + 'controls':0,
69 + 'disablekb':1,
70 + 'fs':0,
71 + 'rel':0,
72 + 'showinfo':0,
73 + 'modestbranding':1,
74 + 'listType':'search',
75 + 'list':name
76 + }
77 + });
78 + //stopVideo();
79 + }
80 +
81 +
82 +
83 +
84 + function onYouTubeIframeAPIReady2(list) {
85 + player = new YT.Player('player', {
86 + height: '360',
87 + width: '640',
88 + //videoId: 'M7lc1UVf-VE',
89 + events: {
90 + 'onReady': onPlayerReady,
91 + 'onStateChange': onPlayerStateChange
92 + },
93 + playerVars:{
94 + 'autoplay':1,
95 + 'controls':0,
96 + 'disablekb':1,
97 + 'fs':0,
98 + 'rel':0,
99 + 'showinfo':0,
100 + 'modestbranding':1,
101 + 'listType':'search',
102 + 'list':list
103 + }
104 + });
105 + //stopVideo();
106 + }
107 +
108 +
109 +
110 + // 4. The API will call this function when the video player is ready.
111 + function onPlayerReady(event) {
112 + event.target.playVideo();
113 + }
114 +
115 + // 5. The API calls this function when the player's state changes.
116 + // The function indicates that when playing a video (state=1),
117 + // the player should play for six seconds and then stop.
118 +
119 +
120 + function onPlayerStateChange(event) {
121 + if (event.data == YT.PlayerState.PLAYING && !done) {
122 + //onYouTubeIframeAPIReady2(name);
123 + //setTimeout(stopVideo, 10000);
124 + done = true;
125 +
126 + }
127 + /*else {
128 + socket.emit('done',);
129 +
130 + }*/
131 + }
132 +
133 + socket.on('play', function(g){
134 + onYouTubeIframeAPIReady2(g);
135 + });
136 +
137 +
138 + function stopVideo() {
139 + player.stopVideo();
140 + }
141 + function playVideo() {
142 + player.playVideo();
143 + }
144 +
145 +
146 + socket.on('receive message list first', function(msg,list){
147 + name = list;
148 + $('#chat_texts').append(msg+"\n");
149 + $('#chat_texts').scrollTop($('#chat_texts').innerHeight())
150 +
151 + tag = document.createElement('script');
152 +
153 + tag.src = "https://www.youtube.com/iframe_api";
154 + var firstScriptTag = document.getElementsByTagName('script')[0];
155 + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
156 +
157 +
158 + });
159 +
160 +
161 +
162 + socket.on('receive message list', function(msg){
163 + $('#chat_texts').append(msg+"\n");
164 + $('#chat_texts').scrollTop($('#chat_texts').innerHeight())
165 +
166 + });
167 +
168 +
169 +
170 +
171 +
172 + socket.on('change name', function(name){
173 + $('#name').html(name);
174 + });
175 +
176 +
177 +
178 + </script>
179 + <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
180 + <div id="player" class="player"></div>
181 + </div>
182 +
183 + <div id="buttons" class="buttons">
184 + <form id="search_button">
185 + 예약하기 - 곡명 : <input id="list_name" class="query" type="text">&ensp;<input type="submit" class="search_button" value="search"/>
186 + </form>
187 + </div>
188 + <script>
189 + $('#search_button').on('submit', function(e){
190 + socket.emit('send list', $('#name').html(), $('#list_name').val());
191 + $('#list_name').val("");
192 + e.preventDefault();
193 + });
194 + </script>
195 + </body>
196 +</html>
1 +{
2 + "name": "socket.io_chatting",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "server.js",
6 + "dependencies": {
7 + "express": "^4.15.3",
8 + "socket.io": "^1.7.4"
9 + },
10 + "devDependencies": {},
11 + "scripts": {
12 + "test": "echo \"Error: no test specified\" && exit 1",
13 + "start": "node server.js"
14 + },
15 + "author": "",
16 + "license": "ISC"
17 +}
1 +var express = require('express');
2 +var app = express();
3 +var http = require('http').Server(app);
4 +var io = require('socket.io')(http);
5 +var wsock = require('wsock');
6 +var Dequeue = require('dequeue')
7 +global.navigator = {
8 + userAgent: 'node.js'
9 +};
10 +navigator.getUserMedia = ( navigator.getUserMedia ||
11 + navigator.webkitGetUserMedia ||
12 + navigator.mozGetUserMedia ||
13 + navigator.msGetUserMedia);
14 +
15 +app.get("/",function(req, res){
16 + res.sendfile("client.html");
17 +});
18 +
19 +var count=1;
20 +
21 +io.on('connection', function(socket){
22 + console.log('user connected: ', socket.id);
23 + var name = "anonymous#" + count++;
24 + var lists = new Dequeue();
25 + io.to(socket.id).emit('change name',name);
26 +
27 + socket.on('disconnect', function(){
28 + console.log('user disconnected: ', socket.id);
29 + });
30 +
31 + socket.on('send message', function(name,text){
32 + var msg = name + ' : ' + text;
33 + console.log(msg);
34 + io.emit('receive message', msg);
35 + });
36 +
37 + socket.on('send list', function(name,list){
38 + var temp = '[KY 금영노래방] '+list;
39 + lists.push(temp);
40 + console.log(lists);
41 + var msg = name + '의 곡 - ' + list + '가 등록 되었습니다.';
42 + console.log(msg);
43 + if (lists.length==1)
44 + {
45 + io.emit('receive message list first', msg, temp);
46 + }
47 + else {
48 + io.emit('receive message list', msg);
49 + }
50 +
51 + });
52 +
53 + socket.on('done', function(){
54 + var g=lists.shift();
55 + io.emit('play',g);
56 + });
57 +
58 +});
59 +
60 +http.listen('3000', function(){
61 + console.log("server on!");
62 +});