[TOC]
Node.js與NPM
使用Socket.io需要安裝Node.js與NPM(node package manager),具體安裝方式參考鏈接或網(wǎng)上搜索這里就不再介紹了。
友情提示：即使不使用Node.js技術(shù)，也建議安裝，很多開源的三方插件都提供npm下載
Express
Express是Node.js輕量級(jí)框架，小巧玲瓏，安裝很方便，cd到node項(xiàng)目下：
npm install express --save
Socket.io
Socket.io是對(duì)Websocket的簡化與補(bǔ)充，使用Socket.io對(duì)初學(xué)者而言不用過多的了解Websocket的各種特性但能完成一些通信、通知等Websocket所具有的功能。這篇博客是我在第一次使用Socket.io之后的心得，寫作目的是為了方便像我一樣的新手學(xué)習(xí)，同樣為了將來自己再次使用Socket.io時(shí)少走彎路。
服務(wù)端代碼
var express=require('express'),
app=express(),
server=require('http').createServer(app),
io=require('socket.io').listen(server);
app.get('/', function (req, res) {
res.send('welcome to chatroom');
});
//用戶列表{令牌:用戶名}
var user_info={};
//status狀態(tài)表{令牌:狀態(tài)}
var coding_status={};
io.on('connection', function(socket){
//服務(wù)器監(jiān)聽message事件
socket.on('message', function(msg){
//服務(wù)器向[全部客戶端]發(fā)送message事件
io.sockets.emit('message', {user:user_info[socket.id],data:msg});
});
//服務(wù)器監(jiān)聽login事件-->
socket.on('login', function(name){
//服務(wù)器向[請(qǐng)求客戶端]發(fā)送login事件
socket.emit('login',{self:true,data:name});
//服務(wù)器向[其他客戶端]發(fā)送login事件
socket.broadcast.emit('login',{self:false,data:name});
//服務(wù)器記錄[請(qǐng)求客戶端]的令牌與用戶名
user_info[socket.id]=name;
});
//服務(wù)器監(jiān)聽coding事件-->
socket.on('coding',function(status){
if(status!=coding_status[socket.id]){
//服務(wù)器向[其他客戶端]發(fā)送coding事件
socket.broadcast.emit('coding',{user:user_info[socket.id],status:status});
}
//服務(wù)器記錄[請(qǐng)求客戶端]的令牌與status
coding_status[socket.id]=status
})
});
server.listen(8080);//服務(wù)器監(jiān)聽8080端口
客戶端
<body>
<div style="display: flex;flex-direction: column;justify-content: center;align-items:center;width: 100%;">
<p>Disgusting chat room!!</p>
<div id="chat-room" style="min-height: 200px;width:400px;border: 1px solid #ccc;">
</div>
<div id="coding">
</div>
<div style="width:400px;display:flex;justify-content:space-between;">
<input id="message" style="width:70%;"/><button id="send_btn">Send Message</button>
</div>
</div>
</body>
<script src="./node_modules/socket.io/socket.io.js"></script>
<script src="./node_modules/jquery/jquery.min.js"></script>
<script>
var socket = io.connect('http://192.168.1.96:8080');
$('#message').on('focus',function(){
if($('#message').val()!=""){
socket.emit('coding',1);
}
return false;
});
$('#message').on('keyup',function(){
if($('#message').val()!=""){
socket.emit('coding',1);
}else{
socket.emit('coding',0);
}
});
$('#message').on('blur',function(){
socket.emit('coding',0);
});
$('#send_btn').on('click',function(){
if($('#message').val()==""){
return;
}
socket.emit('message', $('#message').val());
$('#message').val("")
return false;
});
//監(jiān)聽message事件
socket.on('message', function(obj){
$("#chat-room").append("<p><span style='color:red'>"+obj.user+":</span>"+obj.data+"</p>");
});
//監(jiān)聽login事件
socket.on('login', function(obj){
if(obj.self==true){
$("#chat-room").append("<p><span style='color:red'>Welcome!</span>"+obj.data+"</p>");
}
if(obj.self==false){
$("#chat-room").append("<p><span style='color:red'>"+obj.data+"</span> have joined room!</p>");
}
});
//監(jiān)聽status事件
socket.on('coding', function(obj){
if(obj.status==1){
$("#coding").append("<p id='"+obj.user+"'><span style='color:red'>"+obj.user+"</span> is coding</p>");
}
if(obj.status==0){
$("#"+obj.user+"").remove();
}
});
var time=new Date()
var name=prompt("Please enter your name!","test"+time.getHours()+time.getSeconds())
if (name!=null && name!=""){
socket.emit('login',name);
// socket.broadcast.emit('');
}
</script>
Socket.io內(nèi)置事件
- connect：連接成功
- connecting：正在連接
- disconnect：斷開連接
- connect_failed：連接失敗
- error：錯(cuò)誤發(fā)生，并且無法被其他事件類型所處理
- message：同服務(wù)器端message事件
- anything：同服務(wù)器端anything事件
- reconnect_failed：重連失敗
- reconnect：成功重連
- reconnecting：正在重連
上面是socket.io內(nèi)置事件，除了內(nèi)置事件，我們還可以自定事件，比如代碼中的coding就是我們自定義的事件。
Socket.io事件請(qǐng)求與監(jiān)聽
服務(wù)器端數(shù)據(jù)傳輸
socket.emit(event, data);//向[請(qǐng)求客戶端]發(fā)送事件
socket.broadcast.emit(event, data);//向[其他客戶端]發(fā)送事件
io.sockets.emit(event, data);//向[所有客戶端]發(fā)送事件
io.sockets.socket(socketid).emit(event,data);//向[指定客戶端]發(fā)送事件
請(qǐng)求客戶端：sender
其他客戶端 :all connected clients expect sender
所有客戶端：all connected clients
socket.on(event,function(data){})//事件監(jiān)聽
類似于jquery語法，data是觸發(fā)事件時(shí)攜帶的數(shù)據(jù)
運(yùn)行結(jié)果
運(yùn)行結(jié)果
介紹了些socket.io的基礎(chǔ)功能，希望對(duì)大家有用，拋磚引玉
git項(xiàng)目地址:Scorcjw/SocketDemo
