socket.io的基本用法

今天用nodejs和socket.io实现在线聊天功能。总结一下socket.io的基本用法

• 首先安装socket包

npm install socket.io

• 在服务器端引用

const socketio = require("socket.io");

• 安装完包，引用这个socket的js文件 。他的路径node_modules/socket.io-client/dist/socket.io.js
  在客户端，即index.html文件中引用

<script src="js/socket.io.js"></script>

socket.io的基本用法是

iosocket.emit('loginIn',username);

emit用来触发事件，上例则是触发loginIn事件，向服务器端发送username数据

此时服务器端如何接收到这个username呢？就要监听loginIn事件

iosocket.on('loginIn', function(msg) {
       //msg就是客户端发送过来的数据
});

同理，客户端也可以接收服务器端的数据。

服务器端要向客户端发送数据，则用

socket.broadcast.emit('loginInServer', msg);

此为广播。除本对象所有客户端均可以接收到此数据msg

客户端要接收，则需要监听loginServer

socket.on('loginInServer', function(msg) {
         //  msg 就是服务器端发送过来的数据
});

服务端

var server = app.listen(port, (error) => {
  if (error) {
    console.error(error);
  } else {
    console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port);
  }
});
socketio.listen(server).on('connection', function (socket) {
    socket.on('messageClient', function (msg) {
        socket.broadcast.emit('messageServer', msg);
        console.log(msg);
    });
    socket.on('loginIn', function (msg) {
        socket.broadcast.emit('loginInServer', msg);
        console.log(msg+"加入聊天室");
    });
    socket.on('loginOut', function (msg) {
        socket.broadcast.emit('loginOutServer', msg);
        console.log(msg+"离开聊天室");
    });
});
 

客户端

$(document).ready(function(){
  var iosocket = io.connect();
  var username = sessionStorage.username;
  iosocket.emit('loginIn',username);
  $(".username").text(sessionStorage.username);
  if(sessionStorage.username==undefined){
    location.href = "/login";
  }
  $(".loginOut").click(function(){
    iosocket.emit('loginOut',username);
    location.href = "/login";
  });
  $(".btn-blue").click(function(){
    var text = $(".mesbox").val();
    if (text!="") {
      var data = {
        name:sessionStorage.username,
        content:text
      }
      iosocket.emit('messageClient',data);
      $('.mesbox').val('');
      sendHtml(username,text);
    }
  });
  iosocket.on('connect', function () {
    //加入聊天室
      iosocket.on('loginInServer', function(msg) {
          loginInHtml(msg);
      });
    //离开聊天室
      iosocket.on('loginOutServer', function(msg) {
        loginOutHtml(msg);
      });
    //获取消息
      iosocket.on('messageServer', function(msg) {
          reciveHtml(msg.name,msg.content);
      });
  });
});
function sendHtml(name,content){
  var html = "";
  html += '<div class="send">'+
            '<div class="sendname">'+name+'</div>'+
            '<div class="sendBox">'+
              '<div class="arrow"></div>'+
              content+
            '</div>'+
            '<div class="clear"></div>'+
          '</div>';
  $(".room").append(html);
  $('.room').scrollTop( $('.room')[0].scrollHeight );
}
function reciveHtml(name,content){
  var html = "";
  html += '<div class="recive">'+
            '<div class="recivename">'+name+'</div>'+
            '<div class="reciveBox">'+
              '<div class="arrow"></div>'+
              content+
            '</div>'+
            '<div class="clear"></div>'+
          '</div>';
  $(".room").append(html);
  $('.room').scrollTop( $('.room')[0].scrollHeight );
}
function loginInHtml(name){
  var html = "";
  html = '<div class="brocast">'+name+'加入聊天室</div>';
  $(".room").append(html);
  $('.room').scrollTop( $('.room')[0].scrollHeight );
}
function loginOutHtml(name){
  var html = "";
  html = '<div class="brocast">'+name+'离开聊天室</div>';
  $(".room").append(html);
  $('.room').scrollTop( $('.room')[0].scrollHeight );
}
document.onkeydown = function(e){
  var ev = document.all ? window.event : e;
  if(ev.keyCode==13) {
    $(".btn-blue").click();
   }
}