WebSocket之socket.io的基本使用
.IO 是一个库,可以在客户端和服务器之间实现低延迟、双向和基于事件的通信。它建立在协议之上,并提供额外的保证,例如回退到 HTTP 长轮询或自动重新连接。
基本使用
安装.io
yarn .io
新建js文件与html文件内容如下
var http = require('http');
var io = require('socket.io');
var server = http.createServer((req,res)=>{
});
server.listen(2183);
// 监听 connection
io.listen(server).on('connection',(user)=>{setInterval(()=>{user.emit('test','哥们我主动来了'+Math.random());},1000);
});
// 引用脚本,固定写法
这个时候启动node后,浏览器打开html可以看到服务器推送的信息:
现在来看一下上面代码,
on('',(user)=>{
(()=>{
user.emit('test','哥们我主动来了'+Math.());
},1000);
})
这里的user其实就是当前访问服务器的一位用户,user.emit(key,value) 就是服务器推送消息给当前user前台的方法,key就是接收时的唯一标识,value就是传输的值。
对应的,接收消息的方法就是on(key,()=>{}),推送与接收方法在前台与服务端都是通用的,
前台 -> 后台
.emit(key,value)
.on(key,(str)=>{
})
后台 -> 前台
.emit(key,value)
.on(key,(str)=>{
})
案例练习
已经了解基本使用后,我们可以来实现一个小功能,先创建html文件如下:
1.实现在A页面发信息,其他在线用户B,C收到消息
上面我们讲到后台emit()只能发送给当前user,那怎么实现给其他用户发呢,这里就将用到.emit()
io.listen(server).on('connection',(user)=>{user.on("msg",(str)=>{// 给除了自己的其他user发送user.broadcast.emit('msg',str);});
});
效果:
2.当有用户断开连接时,推送消息给其他在线用户
user.on('disconnect',()=>{user.broadcast.emit('msg','有人下线了!')
});
3.实现远程拖拽(效果如下)
var http = require('http');
var io = require('socket.io');var server = http.createServer((req,res)=>{});
server.listen(2183);io.listen(server).on('connection',(user)=>{user.on('divNode',(json)=>{user.broadcast.emit('style',json);})});
总结
使用可以实现非常多有趣又实用的功能,后面再写一个在线聊天室巩固一下知识。