socket.io-clitent的简单使用

193 阅读1分钟

这段时间学习了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)