这段时间学习了socket.io,总结了一些它的基本使用方式和一些要点,这些包括客户端和服务端。
服务端
服务端使用的是koa socket.io
const app = new Koa()
const server = require('http').createServer(app.callback());
//cors:true 解决跨域
const io = require('socket.io')(server, { cors: true });
io.on('connection', (socket) => {
socket.emit('open');//通知客户端已连接
console.log('connected');
count++;
//监听disconnect事件
//news 自己定义的字段 需要和客户端的匹配
socket.on('news',function(data) {
//接受来自客户端的信息
console.log(data)
socket.emit('news',socket.name) //给客户端发送信息,注意字段要和接受的客户端保持相同
})
socket.on("disconnect", (reason) => {
console.log(socket.connected);
console.log("断开连接-disconnect", reason);
})
socket.on("connect_error", (err) => {
console.log("连接错误-connect_error");
});
// 连接超时
socket.on("connect_timeout", (data) => {
console.log("连接超时-connect_timeout", data);
});
// 重连成功
socket.on("reconnect", (attemptNumber) => {
// 重连尝试次数
console.log("重连成功-reconnect", attemptNumber)
});
})
sever.listen(3000,()=>{
console.log('正在监听3000端口')
})
客户端
在客户端使用的是socke.io-client
import io from 'socket.io-client'
class ws{
constructor(url){
this.url = url
this.init()
}
init(){
this.socket = io(this.url)
this.socket.on('open', () => {
console.log('open')
});
//这里的字段和服务端的字段保持一致
this.socket.on('news', function(data) {
alert(data)
console.log('收到了后端"news"发来的数据:', data);
});
this.socket.on("disconnect", (reason) => {
console.log(this.socket.connected);
console.log("断开连接-disconnect", reason);
})
this.socket.on("connect_timeout", (data) => {
console.log("连接超时-connect_timeout", data);
});
this.socket.on("reconnect", (attemptNumber) => {
// 重连尝试次数
console.log("重连成功-reconnect", attemptNumber)
});
sendMsg(data){
this.socket.emit('news',data)
}
}
}
//需要使用时,直接创建ws实例,便于创建多个连接
let wsClient = new ws(url)