node+socket.io 实现一个聊天室

咱们只作简单的实现，不接入数据库，nodejs也不使用express和koa等框架  

所以依赖只有两个： 一、socket.io 二、mime（用于获取静态资源时获取文件的mime类型） 

 安装命令： npm install socket.io mime --save 

 其余的就不赘述了 先描述一下文件目录结构

静态 js 和 css 文件放在 public 下面的相应目录下

socket链接是基于tcp的所以须要给socket传入一个http服务的实例，这样就能启动socket服务

var http = require('http');
var socketio = require('socket.io');
var server = http.createServer();
io = socketio(server);
 
server.listen(3001);
复制代码

固然，socket.io不止提供了一种启动方式，这里就不一一列举了 

 socketio(server) 返回的是一个 socket 实例，经过这个实例能够监听客户端的 connection事件，事件监听的第二个参数是一个回调函数，会掉函数也会返回一个socket对象，这个 socket 对象能够监听这个连接的另外一端触发的事件（这里就是客户端）  

这里须要搞清楚的一点是，每一个socket链接都会在 connection 事件的回调中返回一个socket 对象，这个对象可监听对应客户端触发的事件，也能够向其余的socket对象广播消息 

 经过connection 事件返回的 socket 对象触发和监听事件： 

io.on('connection', function(socket) {
    // 监听客户端发送的message事件
    socket.on('message', function() {
        // 向同一个房间中的其余用户广播消息
        socket.broadcast.to(message.room).emit('message', {
            text: nickNames[socket.id] + ': ' + message.text
        });
        
    });
 
    // 触发事件
    socket.emit('message', {
        nick: 'Lily',
        content: 'hello world!'
    });
});
复制代码

如今咱们知道了如何在服务端建立socket 服务，那么客户端应该应该怎么和服务端的socket服务建立链接呢？

html页面引入的其余 js 文件这里就不说了，这里须要说明的是socket.io.js：

<script src="/socket.io/socket.io.js"></script>
复制代码

我刚开始的时候也是很疑惑，由于这个文件在个人服务其中根本不存在。事实是，这个文件是socket 服务器启动后自动生成的。所以咱们只须要在html文件中按照这个路径引入就好了。 

引入socket.io.js 后就会有一个全局的 io 对象，用于触发事件和监听服务器 socket 服务器触发的事件 客户端事件监听：

var socket = io.connect();
 
$(document).ready(function() {
    // 监听服务器发送的事件
    socket.on('message', function(message) {
        var newElement = $('<div class="msg-box"></div>').append($('<span></span>').text(message.text));
 
        $('#messages').append(newElement);
    });
 
});
复制代码

客户端触发事件：

socket.emit('message', {
    nick: 'Lily',
    content: 'yes! I hear you now'
});
复制代码

message能够是对象也能够是字符串

这样创建链接设置监听后就能够和服务端经过事件进行通讯了

服务端监听到客户端发来的消息后向该房间全部用户广播消息：

socket.broadcast.to(currentRoom[socket.id]).emit('message', {
    text: previousName + ' 如今已改名为 ' + name + '.'
});
复制代码

结合以上描述的这些方法，就能完整搭建一个聊天室了，关于前端页面的结构和页面事件的逻辑我这里就不详细说了

我把个人demo放到了github上，有兴趣的同窗能够看看：github.com/SailorCai/n…