socket.io实现聊天室
Realtime application framework
socket.io简单来说就是对websocket的封装，不包括了客户端的js与服务端的node.js，其目的是为了构建在不同个浏览器和设备的实时应用问题，例如：无人点餐，即时通信等
案例：实现聊天室
基于 node + express + socket.io + vue + flex 来实现聊天室
实现功能：
- 登录检测
- 系统提示在线人员状态（进入/离开）
- 接收和发送消息
- 自定义消息字体颜色
- 支持发送表情
- 支持发送窗口震动
初始化和安装依赖
npm init --yes
npm i express socket.io -s
集成 socket.io
socket.io 由两部分组成
- 与node.js HTTP 服务集成的服务器：socket.io
- 在浏览器端加载的客户端库：socket.io-client
开发期间，socket.io 会自动为我们服务，正如所看到的，只需要安装一个模块
server.js
const express = require('express')
const app = express()
// 将服务器 app绑定到http实例上
const http = require('http').Server(app)
// 传递http服务器实例对象来初始化 socket.io 的新实例
// http模块监听传入socket的 connection 事件，并将其记录到控制台
const io = require('socket.io')(http)
// 设置静态资源根目录
app.use('/', express.static(__dirname + '/static'))
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})
// io绑定事件 connection建立连接 断开链接 disconnected
io.on('connection', socket => {
console.log('一个用户建立链接');
// socket绑定事件，客户端触发了addCart事件，发送数据data
socket.on('addCart', data => {
console.log(data);
// socket.emit 代表向当前这个人发送信息
// io.emit 代表向所有人发送信息
socket.emit('to-client', {
server: '这是来自服务器端的数据'
})
})
})
http.listen(3000, () => {
console.log('监听3000端口');
})
需要注意是通过http实例监听3000端口
static/index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>聊天室</h1>
<button id='btn'>添加购物车</button>
<!-- 客户端的socket.io -->
<script src="js/socket.io.min.js"></script>
<script>
console.log(io);
</script>
</body>
</html>
引入socket.io后会自动创建io对象，打印结果
继续，设置服务器地址，和获取按钮 - 点击事件
声明 socket.emit 发送请求 和 socket.on 来接收服务器的返回信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>聊天室</h1>
<button id='btn'>添加购物车</button>
<!-- 客户端的socket.io -->
<script src="js/socket.io.min.js"></script>
<script>
// 调用io方法传入服务器端地址返回socket对象，如果不写就代表是当前服务器地址(要写)
const socket = io('http://localhost:3000')
document.querySelector('#btn').onclick = () => {
// 通过 socket.emit 发送请求，第一个参数为服务端 socket.on 内绑定的事件，第二个参数为要传送的数据
socket.emit('addCart', {
msg: '这是一条来自客户端的信息'
})
// 通过 socket.on 来接收请求，第一个参数为服务器端要触发的事件，第二个参数为服务器端发送过来的信息
socket.on('to-client', data => {
console.log(data);
})
}
</script>
</body>
</html>
聊天室实例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="app">
<div class="name" v-if='isShow'>
<!-- <h2>请输入你的昵称</h2> -->
<input type="text" v-model='username' id="name" placeholder="请输入昵称..." autocomplete="off"
@keyup.enter='handleClick'>
<button id="nameBtn" @click='handleClick'>确 定</button>
</div>
<!-- 整个窗口 -->
<div class="main" :class='{shaking:isShake}'>
<div class="header">
<img src="image/logo.jpg">
❤️聊天室
</div>
<div id="container">
<div class="conversation">
<ul id="messages">
<li v-for='(user,i) in userSystem' :key='i' :class='user.side'>
<!-- 当前用户发送消息的面板 -->
<div v-if='user.isUser'>
<!-- 用户头像 -->
<img :src="user.imgSrc" alt="">
<div>
<span>{{user.name}}</span>
<!-- 用户信息显示 -->
<p v-html='user.msg' :style='{color:user.color}'>
</p>
</div>
</div>
<p class='system' v-else>
<span>{{nowDate}}</span><br />
<span v-if='user.status'>{{user.name}}{{user.status}}了聊天室</span>
<span v-else>{{user.name}}发送了一个窗口抖动</span>
</p>
</li>
</ul>
<!-- 发送消息的表单处理 -->
<form action="">
<!-- 发送上面控件 -->
<div class="edit">
<input type="color" id="color" v-model='color'>
<i title="自定义字体颜色" id="font" class="fa fa-font">
</i><i title="双击取消选择" class="fa fa-smile-o" id="smile" @click='handleSelectEmoji' @dblclick='handleDoubleSelectEmoji'>
</i><i title="单击页面震动" id="shake" class="fa fa-bolt" @click='handleShake'>
</i>
<input type="file" id="file">
<i class="fa fa-picture-o" id="img"></i>
<!-- 表情管理 -->
<div class="selectBox" v-show='isEmojiShow'>
<div class="smile" id="smileDiv">
<p>经典表情</p>
<!-- 表情包 -->
<ul class="emoji">
<li v-for='(emojiSrc,i) in emojis' :key='i'>
<img :src="emojiSrc" :alt="i+1" @click='handleEmoji(i)'>
</li>
</ul>
</div>
</div>
</div>
<!-- autocomplete禁用自动完成功能 -->
<textarea id="m" autofocus v-model='msgVal'></textarea>
<button class="btn rBtn" id="sub" @click='handleSendMsg'>发送</button>
<button class="btn" id="clear" @click='handleCloseMsg'>关闭</button>
</form>
</div>
<!-- 在线人员显示 -->
<div class="contacts">
<h1>在线人员(<span id="num">{{userInfo.length}}</span>)</h1>
<ul id="users">
<li v-for='(user,i) in userInfo' :key='i'>
<img :src="user.imgSrc" alt="">
<span>{{user.username}}</span>
</li>
</ul>
<p v-if='userInfo.length === 0'>当前无人在线哟~</p>
</div>
</div>
</div>
</div>
<script src="./js/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src='js/client.js'></script>
</body>
</html>
client.js
new Vue({
el: "#app",
data() {
return {
isShow: true,
username: '',//当前用户名
userSystem: [],//存储当前用户的状态和消息数组
nowDate: new Date().toTimeString().substr(0, 8),//当前时间
userInfo: [],//当前用户信息
msgVal: '',//消息内容
color: '#000000',//字体颜色
isEmojiShow: false,//表情默认隐藏
emojis: [],//存放表情的数组
isShake:false,
timer:null,
}
},
methods: {
// 单击笑脸的事件
handleSelectEmoji() {
this.isEmojiShow = true;
},
// 双击笑脸取消事件
handleDoubleSelectEmoji() {
this.isEmojiShow = false;
},
handleEmoji(i) {
//处理单击表情的事件
this.isEmojiShow = false;
this.msgVal = this.msgVal + `[emoji${i}]`
},
// 点击确定按钮
handleClick() {
const imgN = Math.floor(Math.random() * 4) + 1; //随机分配 1 2 3 4
if (this.username) {
this.socket.emit('login', {
username: this.username,
imgSrc: `image/user${imgN}.jpg`
})
}
},
handleSendMsg(e) {
// 发送消息的事件 vue 事件修饰符
e.preventDefault();
if (this.msgVal) {
this.socket.emit('sendMsg', {
msgVal: this.msgVal,
color: this.color
// 颜色
})
this.msgVal = '';
}
},
handleCloseMsg(e) {
// 点击关闭按钮操作
e.preventDefault();
this.isEmojiShow = false;
this.msgVal = '';
},
initEmoji() {
for (let i = 1; i <= 141; i++) {
this.emojis.push(`image/emoji/emoji (${i}).png`)
}
},
scrollBottom(){
// 在DOM渲染完成之后，执行内部的回调
this.$nextTick(()=>{
const oDiv = document.getElementById('messages');
oDiv.scrollTop = oDiv.scrollHeight;
})
},
handleShake(){
// 震动的方法
this.socket.emit('shake');
},
shake(){
//震动的方法
this.isShake = true;
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.isShake = false;
}, 500);
}
},
created() {
// 初始化渲染表情
this.initEmoji();
const socket = io();
this.socket = socket;
this.socket.on('loginSuc', () => {
console.log('登录成功了');
this.isShow = false;
})
this.socket.on('loginError', () => {
alert('用户名重复，请重新输入');
this.username = '';
})
this.socket.on('system', (user) => {
// {name:"小马哥",status:'进入'}
this.userSystem.push(user);
this.scrollBottom();
})
this.socket.on('disUser', (userInfo) => {
this.userInfo = userInfo;
})
this.socket.on('receiveMsg', (user) => {
let { msg } = user;
let content = '';
while (msg.indexOf('[') > -1) {
// 有表情渲染
const start = msg.indexOf('[');
const end = msg.indexOf(']');
content += `<span>${msg.substr(0, start)}</span>`;
content += `<img src="image/emoji/emoji%20(${msg.substr(start + 6, end - start - 6)}).png" alt=""/>`
msg = msg.substr(end + 1, msg.length);
}
content += `<span>${msg}</span>`
user.msg = content;
// 颜色展示
// 表情渲染
// 保证滚动条总是在最底部
this.userSystem.push(user);
// 保证滚动条始终在下面
this.scrollBottom();
})
// 监听震动事件
this.socket.on('shake',(data)=>{
this.userSystem.push(data);
// 处理页面震动的操作
this.shake();
// 滚动条滚动到最底部
this.scrollBottom();
})
}
})
server.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
// 设置静态资源根目录
app.use('/', express.static(__dirname + '/static'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
})
let users = [];//存储当前用户名的数组
let userInfo = [];//存储当前用户信息
io.on('connection', function (socket) {
console.log('建立服务器端链接');
// 监听客户端发送来的登录消息
socket.on('login', function (user) {
const { username } = user;
if (users.indexOf(username) > -1) {
//用户名重复了
socket.emit('loginError')
} else {
users.push(username);
userInfo.push(user);
// 存储当前用户名
socket.nickName = username;
// 通知客户端登录成功
io.emit('loginSuc');
// 小马哥进入聊天室
io.emit('system', {
name: username,
status: '进入'
})
// 显示在线人员，给客户端返回消息
io.emit('disUser', userInfo);
console.log('一个用户登录了');
}
})
// 监听发送消息事件
socket.on('sendMsg', (data) => {
let imgSrc = '';
// 谁发送消息 头像地址就是谁的，因为socket.nickname 是当前用户登录时存储的名字
for (let i = 0; i < userInfo.length; i++) {
if (userInfo[i].username === socket.nickName){
imgSrc = userInfo[i].imgSrc;
}
}
// 广播给除发送人之外的所有人
socket.broadcast.emit('receiveMsg', {
name: socket.nickName,
imgSrc:imgSrc,
msg:data.msgVal,
color:data.color,
// 颜色 类型
side:'left',
isUser:true,
})
socket.emit('receiveMsg',{
name: socket.nickName,
imgSrc: imgSrc,
msg: data.msgVal,
color: data.color,
// 颜色 类型
side: 'right',
isUser: true,
})
})
// 发送窗口震动事件
socket.on('shake',()=>{
socket.emit('shake',{
name:'您'
})
// 广播消息 给其它的用户
socket.broadcast.emit('shake',{
name:socket.nickName
})
})
// 断开链接时的操作
socket.on('disconnect', () => {
// [a,b,c] //1 users userInfo
let index = users.indexOf(socket.nickName);
if (index > -1) {
users.splice(index, 1); //删除用户名
userInfo.splice(index, 1);//删除用户信息
// 通知给客户端 告知什么时间 xxx离开了
io.emit('system', {
name: socket.nickName,
status: '离开'
})
// 告知客户端重新渲染
io.emit('disUser', userInfo);
}
})
});
http.listen(3000, () => {
console.log('listen on 3000 port!');
})
总结
服务端
io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socket
io.sockets.emit(‘String’,data);//给所有客户端广播消息
io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息
socket.on(‘String’,function(data));//监听客户端发送的信息
socket.emit(‘String’, data);//给该socket的客户端发送消息
广播消息
//给除了自己以外的客户端广播消息
socket.broadcast.emit("msg",{data:"hello,everyone"});
//给所有客户端广播消息
io.sockets.emit("msg",{data:"hello,all"});
分组
socket.on('group1', function (data) {
socket.join('group1');
});
socket.on('group2',function(data){
socket.join('group2');
});
客户端发送
socket.emit(‘group1’)，就可以加入group1分组； socket.emit(‘group2’)，就可以加入group2分组；
一个客户端可以存在多个分组（订阅模式）
踢出分组
socket.leave(data.room);
对分组中的用户发送信息
//不包括自己
socket.broadcast.to('group1').emit('event_name', data);
//包括自己
io.sockets.in('group1').emit('event_name', data);
broadcast方法允许当前socket client不在该分组内
获取连接的客户端socket
io.sockets.clients().forEach(function (socket) {
//.....
})
获取分组信息
//获取所有房间（分组）信息
io.sockets.manager.rooms
//来获取此socketid进入的房间信息
io.sockets.manager.roomClients[socket.id]
//获取particular room中的客户端，返回所有在此房间的socket实例
io.sockets.clients('particular room')
另一种分组方式
io.of('/some').on('connection', function (socket) {
socket.on('test', function (data) {
socket.broadcast.emit('event_name',{});
});
});
客户端
var socket = io.connect('ws://103.31.201.154:5555/some')
socket.on('even_name',function(data){
console.log(data);
})
客户端都链接到ws://103.31.201.154:5555 但是服务端可以通过io.of(‘/some’)将其过滤出来。
另外，Socket.IO提供了4个配置的API：io.configure, io.set, io.enable, io.disable。其中io.set对单项进行设置，io.enable和io.disable用于单项设置布尔型的配置。io.configure可以让你对不同的生产环境（如devlopment，test等等）配置不同的参数。
客户端
建立一个socket连接
var socket = io(“ws://103.31.201.154:5555”);
监听服务消息
socket.on('msg',function(data){
socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息
console.log(data);
});
socket.on(“String”,function(data)) 监听服务端发送的消息 Sting参数与服务端emit第一个参数相同
监听socket断开与重连。
socket.on('disconnect', function() {
console.log("与服务其断开");
});
socket.on('reconnect', function() {
console.log("重新连接到服务器");
});
客户端socket.on()监听的事件：
connect：连接成功
connecting：正在连接
disconnect：断开连接
connect_failed：连接失败
error：错误发生，并且无法被其他事件类型所处理
message：同服务器端message事件
anything：同服务器端anything事件
reconnect_failed：重连失败
reconnect：成功重连
reconnecting：正在重连
当第一次连接时，事件触发顺序为：connecting->connect；当失去连接时，事件触发顺序为：disconnect->reconnecting（可能进行多次）->connecting->reconnect->connect。
相关文档
教程文档
Socket.IO 教程 | 开发学院 (kaifaxueyuan.com)
