# socket.io基本使用
npm socket.io
//Node端
/*
启动聊天的服务端程序
*/
var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server)
// 记录所有已经登录过的用户
const users = []
server.listen(3000, () => {
console.log('服务器启动成功了')
})
// express处理静态资源
// 把public目录设置为静态资源目录
app.use(require('express').static('public'))
app.get('/', function(req, res) {
res.redirect('/index.html')
})
io.on('connection', function(socket) {
socket.on('login', data => {
// 判断，如果data在users中存在，说明该用户已经登录了，不允许登录
// 如果data在users中不存在，说明该用户没有登录，允许用户登录
let user = users.find(item => item.username === data.username)
if (user) {
// 表示用户存在， 登录失败. 服务器需要给当前用户响应，告诉登录失败
socket.emit('loginError', { msg: '登录失败' })
// console.log('登录失败')
} else {
// 表示用户不存在, 登录成功
users.push(data)
// 告诉用户，登录成功
socket.emit('loginSuccess', data)
// console.log('登录成功')
// 告诉所有的用户，有用户加入到了聊天室，广播消息
// socket.emit: 告诉当前用户
// io.emit : 广播事件
io.emit('addUser', data)
// 告诉所有的用户，目前聊天室中有多少人
io.emit('userList', users)
// 把登录成功的用户名和头像存储起来
socket.username = data.username
socket.avatar = data.avatar
}
})
// 用户断开连接的功能
// 监听用户断开连接
socket.on('disconnect', () => {
// 把当前用户的信息从users中删除掉
let idx = users.findIndex(item => item.username === socket.username)
// 删除掉断开连接的这个人
users.splice(idx, 1)
// 1. 告诉所有人，有人离开了聊天室
io.emit('delUser', {
username: socket.username,
avatar: socket.avatar
})
// 2. 告诉所有人，userList发生更新
io.emit('userList', users)
})
// 监听聊天的消息
socket.on('sendMessage', data => {
console.log(data)
// 广播给所有用户
io.emit('receiveMessage', data)
})
// 接收图片信息
socket.on('sendImage', data => {
// 广播给所有用户
io.emit('receiveImage', data)
})
})
# 广播给所有用户
io.emit('receiveMessage', data)
# 单发
socket.on() //监听
socket.emit()//发送
# 一个完整的例子
{
"name": "2018-2-3",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"socket.io": "^2.0.4"
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#ul1 {width:400px; height:300px; border:1px solid black; overflow:auto;}
#ul1 li.me {color:green}
.err_box {width:100%; height:20px; line-height: 20px; text-align:center; color:red; display:none}
</style>
<script src="http://localhost:9000/socket.io/socket.io.js" charset="utf-8"></script>
<script>
let sock=io.connect('ws://localhost:9000/');
sock.on('connect', ()=>{
document.getElementsByClassName('err_box')[0].style.display='none';
});
sock.on('disconnect', ()=>{
document.getElementsByClassName('err_box')[0].style.display='block';
});
//聊天室
window.onload=function (){
let oTxt=document.getElementById('txt1');
let oBtn=document.getElementById('btn1');
let oUl=document.getElementById('ul1');
oBtn.onclick=function (){
sock.emit('msg', oTxt.value);
let oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
oLi.className='me';
oTxt.value='';
oUl.appendChild(oLi);
};
sock.on('msg', str=>{
let oLi=document.createElement('li');
oLi.innerHTML=str;
oUl.appendChild(oLi);
});
};
</script>
</head>
<body>
<div class="err_box">
无法连接到服务器，请检查网络
</div>
<ul id="ul1"></ul>
<textarea rows="4" cols="60" id="txt1"></textarea>
<input type="button" value="发送" id="btn1">
</body>
</html>
const http=require('http');
const io=require('socket.io');
let httpServer=http.createServer((req, res)=>{
});
httpServer.listen(9000);
//
let wsServer=io.listen(httpServer);
let aSock=[];
wsServer.on('connection', sock=>{
aSock.push(sock);
//断开连接
sock.on('disconnect', ()=>{
let n=aSock.indexOf(sock);
if(n!=-1){
aSock.splice(n, 1);
}
});
sock.on('msg', str=>{
aSock.forEach(s=>{
if(s!=sock){
s.emit('msg', str);
}
});
});
});
setInterval(function (){
console.log(aSock.length);
}, 5000);