春节放假了,打算把搁了很久的项目做了。
项目的来源是这样的:
虾米音乐把直播间功能砍掉了。
直播间就是播主放什么歌,观众也能跟着听的一个功能。
可以一起听歌的意思。
然后我就立了flag说要做个谷歌插件来实现被他砍掉的直播间功能。
主要功能就是在观众端同步执行播主进行的操作就好了。
于是开始写了。
准备
因为这个功能是实时性的,就想到用socket.io。
要用socket的话,要先安装node。
nodejs并不在ubuntu的默认源中,需要自行添加ppa再安装。
新建package.json文件,里面写{}
。安装express包和socket包。
npm install --save express
npm install --save socket.io
安装完毕,再写个基本的端口监听和返回响应的功能,存为index.js
。
var app = require('express')();
var server = require('http').Server(app);
var listen_port = 9999;
server.listen( listen_port );
//route
app.get('/', function( request, response ){
response.send('Hello world');
});
在这里监听的是9999
端口。
输入node index.js
就能启动服务器了。
目前没有在启动的时候输出内容,所以运行上面的命令后是没有任何输出内容的。
直接访问相应地址就可以看到运行结果。运行结果应该是会输出“Hello world”。
插件的撰写过程就另开一篇文章写吧。
插件实现的最主要功能就是往页面里插入代码。
插入的代码就是socket的客户端。
代码
好了,现在写客户端。
var socket_server, socket;
$(document).ready(function () {
var btn = $('<button>').attr('id','test').css({
'outline':'3px solid green',
'position':'absolute',
'top':'0',
'left':'0',
'width': '100px',
'height': '30px'
});
$('#player-main').append(btn);
socket_server = 'http://plamenatv.free.bg/up.html //socket地址
socket = io( socket_server );
$('#test').on('click', function(){
socket.emit('player.pause', 'Amethyst'); //触发事件player.pause,发送数据为Amethyst
});
});
与此同时,服务端也要相应的增加了。
... //原来写的代码
io.on('connection', function( socket ){
socket.on('player.pause', function( message ){ //监听事件
console.log('Player paused ' + message + '.'); //把收到的消息打印出来
});
});