socket.io的基本用法

来源：互联网发布：淘宝聚星台入口在哪里编辑：程序博客网时间：2024/06/06 03:03

今天用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();   }}

0 0