使用scoket.io来实现简单的及时通讯

scoket.io

它适用于所有平台，浏览器或设备，并同时关注可靠性和速度

具有以下优点：

1.实时分析
将数据推送到以实时计数器，及时监听页面所有的变化，并且接收和发送给客户端数据。

2.即时通讯和聊天
Socket.IO结合node以及express实现简单的即使通讯。

3.作为服务器
可以把socket.io当成一个服务器用来传输数据

4.自动重接支持
除非另有指示，否则断开的客户端将尝试重新连接，直到服务器重新可用

安装

yarn add scoket.io

搭建基本结构（前提有node）

创建app.js文件作为服务器

//创建http服务器
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
//监听端口
server.listen(3002, function(){
  console.log('服务器正在运行。。。。');
});
//结合node中exoress来处理在静态资源
//express  处理静态资源
//吧pubilc设置静态资源
app.use(require('express').static('public'))

app.get('/', function(req, res){
   res.redirect('./index.html')
});

//express  处理静态资源
//吧pubilc设置静态资源
app.use(require('express').static('public'))

app.get('/', function(req, res){
   res.redirect('./index.html')
});
//监听服务器运行时所发生的事件 相当于生命周期函数
io.on('connection', function(socket){
  // console.log('新的用户连接上来了');
}

在前端页面引入相关文件

  <!-- 引入socket.io -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/jquery-1.8.2.js"></script> //实现诸多方法需用到
    <script src="./js/index.js"></script> //用于处理接收方法和信息
    <script>
        var socket = io('http://localhost:3002');  //连接端口 启动服务
    </script>

监听聊天功能

socket.on('sendMessage',data=>{ 
     console.log(data)
     io.emit('receiveMsssage',data)
   })

前端应也接收和回应到页面

 $('.btn').on('click',()=>{
        var content = $('#content').val().trim()
        $('#content').val('')
        if(!content) return alert('请输入内容')
        socket.emit('sendMessage',{
          msg:content,
          username:username,
          avatar:avatar
        })
      })

      socket.on('receiveMsssage',data=>{
        // console.log(data)
        if(data.username===username){
        $('.box-bd').append(`
        

                

                    ${data.avatar}" alt="">
                   

                      

                         
${data.msg}
                        ▶ 
                      
                   
                
             
        `)
        }else{
          $('.box-bd').append(`
          

          

              ${data.avatar}" alt="">
             

                 
${data.username}
                

                   
${data.msg}
                   ◀ 
                
             
          
       
          `)
        }

这里是一些socket.on和socket.emit的用法

前端

function onConnect(socket){

  // 发送给当前客户端
  socket.emit('hello', 'can you hear me?', 1, 2, 'abc');

  // 发送给所有客户端，除了发送者
  socket.broadcast.emit('broadcast', 'hello friends!');

  // 发送给同在 'game' 房间的所有客户端，除了发送者
  socket.to('game').emit('nice game', "let's play a game");

  // 发送给同在 'game1' 或 'game2' 房间的所有客户端，除了发送者
  socket.to('game1').to('game2').emit('nice game', "let's play a game (too)");

  // 发送给同在 'game' 房间的所有客户端，包括发送者
  io.in('game').emit('big-announcement', 'the game will start soon');

  // 发送给同在 'myNamespace' 命名空间下的所有客户端，包括发送者
  io.of('myNamespace').emit('bigger-announcement', 'the tournament will start soon');

  // 发送给指定 socketid 的客户端（私密消息）
  socket.to(<socketid>).emit('hey', 'I just met you');

  // 包含回执的消息
  socket.emit('question', 'do you think so?', function (answer) {});

  // 不压缩，直接发送
  socket.compress(false).emit('uncompressed', "that's rough");

  // 如果客户端还不能接收消息，那么消息可能丢失
  socket.volatile.emit('maybe', 'do you really need it?');

  // 发送给当前 node 实例下的所有客户端（在使用多个 node 实例的情况下）
  io.local.emit('hi', 'my lovely babies');

};

服务端

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的客户端发送消息