websocket.io

一. 服务器端

使用express服务

const path = require('path');
const app =express();//其实是一个监听函数
const server = require('http').createServer(app);
//使用静态文件中间件,把当前目录下面的public目录作为静态文件的根目录
app.use(express.static(path.resolve('public'))); 

a.简单的使用websocket.io

let io = require('socket.io')(server);
io.on('connection',function(socket){ 
  console.log('客户端连接成功');
  socket.on('message',function(message){
  //对发送消息过来的客户端发送消息
  socket.send('客户端发过来的消息0'+message) 
  //向所有的客户端发送消息,但不包括自己
  socket.brocast.emit('message',message)
  //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
  io.emit('message',message)
  })
})

b 使用命名空间 实例中两个命名空间info job

//io.on('connection',function('socket){}) 等价于===io.of('/').on('connection',function(socket){})
io.of('/dev').on('connection',function(socket){ 
  console.log('客户端连接成功');
  socket.on('message',function(message){
    io.of('/dev').emit('message',message) //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
  })
})

io.of('/job').on('connection',function(socket){ 
  console.log('客户端job连接成功');
  socket.on('message',function(message){
      console.log('客户端发过来的消息:'+message);
      io.of('/job').emit('message',message) //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
  })
})

c. 进入不同的命名空间不同房间(以info命名空间为例)

io.of('/info').on('connection',function(socket){ 
  console.log('客户端info连接成功');
  let roomName
  socket.on('message',function(message){
     //向命名空间内的对应roomName的客户端广播
     io.of('/info').in(roomName).emit('message',message)
  })
  //进入房间 socket.join(name)中的join是关键字固定的
  socket.on('join',function(name){
    roomName = name;
    socket.join(name)
  })
  //离开房间 socket.leave(name)中的leave是关键字固定的
  socket.on('leave',function(name){
    socket.leave(name);
     roomName = null;
  })
})

二. 客户端 vue为例

a. 引入socket.io-client

  import io from 'socket.io-client'

b.建立连接

 //const socket = io('ws://localhost:8080')  
 //可以有很多种写法io()==io('ws://localhost:8080'),socket=io()貌似不行
 //socket = io.connect('ws://localhost:8080') 
 //一般使用下面的写法
 const socket = io('http://localhost:8080')

连接服务器不同的命名空间,与服务器端命名空间对应

 const socket = io('http://localhost:8080/info')
  const socket = io('http://localhost:8080/job')

c. 监听

mounted(){
      socket.on('connect',function(){ //服务器连接成功的回调函数
        console.log('连接成功');
      });
     socket.on('message',function(message){
         console.log('服务器发送过来的消息:',message);
      })
      socket.on('error',function(error){
         console.log('infoError',error);
      })
    },
    methods: {
      fayan(){  //给服务器发送消息
        socket.send(this.content1)  // this.content1要给服务器发送的消息
      },
      join(name){ //进入不同的房间
        socket.emit('join',name)
      },
	  
      leave(name){ //离开不同的房间
        socket.emit('leave',name)
      },
    }

d html代码

<template>
  <div>
   <Input v-model="content1"></Input>
   <Button @click='fayan'  >发言</Button>
    <Button @click="join('red')" style='margin-left: 10px;' >进入红房间</Button>
    <Button @click="join('green')" style='margin-left: 10px;' >进入绿房间</Button>
     <Button @click="leave('red')" style='margin-left: 10px;' >离开红房间</Button>
    <Button @click="leave('green')" style='margin-left: 10px;' >离开绿房间</Button>
  </div>
</template>

2019-06-12 16:43:17 星期三 进入不同的房间没有实现效果

转载于:https://my.oschina.net/u/4053340/blog/3061221