服务端代码：
var express = require('express'), sio = require('socket.io'), request = require('superagent');
app = express.createServer(express.bodyParser(), express.static('public'));
app.listen(3000);
var io = sio.listen(app);
var currentSong, dj;
function elect(socket) {
dj = socket;
socket.emit('elected');//确保只有dj 能显示选择列表
io.sockets.emit('announcement', socket.nickname + ' is the new dj!');
socket.dj = true;
socket.on('disconnect', function () {
dj = null;
io.sockets.emit('announcement', socket.nickname + 'the dj left---next one to join becomes dj!');
});
}
io.sockets.on("connection", function (socket) {
//console.log("有新的连接: 共有 "+io.sockets.clients.length);
socket.on("join", function (name) {
socket.nickname = name;
socket.broadcast.emit("announcement", name + ' join the chat!');//注意：socket.broadcast.emit中的broadcast是一种标志信息，它改变了emit的行为
if (!dj) {
elect(socket);
} else {
socket.emit("song", currentSong);//连接上来默认播放的歌曲
}
});
//定义search事件
socket.on("search", function (q, fn) {
request.get('http://localhost:3001/')
.end(function (res) {
console.log("=========>>" + res.text);
if (res.status == 200) {
fn(JSON.parse(res.text));
}
});
});
//接收DJ的事件 并广播 让其他用户播放音乐
socket.on('song', function (song) {
if(socket.dj){
currentSong=song;
socket.broadcast.emit('song',song);
}
});
//接收到某个客户端消息之后再广播给其他用户
socket.on("text", function (msg, fn) {
socket.broadcast.emit("text", socket.nickname, msg);
fn(Date.now());
});
});客户端html:
<html>
<head>
<title>Socket.IO chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="/chat.js"></script>
<link href="/chat.css"/>
</head>
<body>
<div id="chat">
<ul id="message"></ul>
<form id="form">
<input type="text" id="input"/>
<button>Send</button>
</form>
</div>
<div id="playing"></div>
<form id="dj">
<h3>Search Songs</h3>
<input type="text" id="s"/>
<ul id="results"></ul>
<button type="submit">Search</button>
</form>
</div>
</body>
</html>客户端chat.js 及chat.css
window.onload = function () {
var socket = io.connect();
socket.on("connect", function () {
//通过join事件发送输入的昵称
socket.emit("join", prompt("请输入你的名字：", "房超"));
//显示聊天窗口
document.getElementById('chat').style.display = 'block';
});
//接收服务端广播的 announcement事件
socket.on("announcement", function (msg) {
var li = document.createElement('li');
li.className = 'announcement';
li.innerHTML = msg;
document.getElementById('message').appendChild(li);
})
//广播聊天信息
var input = document.getElementById('input');
document.getElementById('form').onsubmit = function () {
var li = addMessage("Me", input.value);//见下面
socket.emit('text', input.value, function (date) {
li.className = 'confirmed';
li.title = date;
var img = document.createElement('img');
img.src = '/confirm.png';
li.appendChild(img);
});//发给服务器 再由服务器广播给其他用户
//重置输入框
input.value = "";
input.focus();
return false;
}
/**
*
* 很显然 当用户书写完消息 并提交后 肯定不希望服务器再将该消息发回来所以 在消息发送之后 我们立刻调用addMessage将消息显示出来（是否发送成功在后面实现）
* @param from
* @param text
*/
function addMessage(from, text) {
var li = document.createElement('li');
li.className = 'message';
li.innerHTML = '<b>' + from + '</b>: ' + text;
document.getElementById('message').appendChild(li);
return li;
}
socket.on("text", addMessage);
//歌曲查询表单
var form = document.getElementById('dj');
var results = document.getElementById('results');
form.style.display = 'block';
form.onsubmit = function () {
results.innerHTML = '';
socket.emit('search', document.getElementById('s').value, function (songs) {
for (var i = 0, l = songs.length; i < l; i++) {
(function (song) {
var result = document.createElement('li');
result.innerHTML = song.ArtistName + '-<b>' + song.SongName + '</b>';
var a = document.createElement('a');
a.href = '#';
a.innerHTML = "选择";
a.onclick = function () {
socket.emit('song', song);
play(song);
return false;
}
result.appendChild(a);
results.appendChild(result);
})(songs[i]);
}
});
return false;
};
//接收服务端发过来的elected事件之后 通过 改变表单的className 来显示每首歌曲的选择链接
socket.on('elected', function () {
form.className = 'isDJ';
});
//播放音乐
var playing = document.getElementById('playing');
function play(song) {
if (!song) {
return;
}
playing.innerHTML = '<hr><b>正在播放：</b>' + song.SongName + '<br>';
var iframe = document.createElement('iframe');
iframe.frameborder = 0;
iframe.src = song.Url;
playing.appendChild(iframe);
}
socket.on('song',play);
}/*在连接之前先隐藏聊天输入窗口*/
#chat {display:none}
#results a {display: none; }
form.isDJ #results a {display: inline; }在网上没找到合适的音乐播放接口所以自己手动码了一个：
require('http').createServer(function (req,res) {
res.writeHead(200,{'Content-Type':'text/html'});
res.end('[{"Url":"http://mp3.haoduoge.com/music7/221023.mp3","SongName":"默","AlbumName":"那英的专辑","ArtistName":"那英"}]');
}).listen(3001);
2203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
