利用socket.io构建一个聊天室

利用socket.io来构建一个聊天室，输入自己的id和消息，所有的访问用户都可以看到，类似于群聊。

socket.io

这里只用来做一个简单的聊天室，官网也有例子，很容易就做出来了。其实主要用的东西就是事件监听和触发，on和emit。当socket.io连接成功之后，后台就可以跟浏览器互相通信了。

let io = socket(app);
io.on('connection', socket => {
    socket.on('reseive', data => {
        io.emit('news', data)
    })
 });

关于后端

首先构建一个服务器，然后请求时将聊天页面文件返回

const app = http.createServer((req, res) => {
    fs.readFile(__dirname+'/index.html', (err, data) => {
        if(err){
            res.writeHead(500);
            return res.end('Error loading index.html');
        }
        res.writeHead(200);
        res.end(data);
    });
}).listen(3003);

这里没什么可说的，别写错路径就行。

index.html

聊天界面只需要将socket.io引入即可

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

切记，这里不是说在index.html目录下建立这个文件，因为你的聊天页面是通过后端返回的，说以这个路径是在后端的路径，换句话说，你只需要这么写就行了。
然后就是聊天页面中监听来自服务端的消息并显示到页面

socket.on('news', data => {
    oDiv.insertAdjacentHTML('beforeend', `<p>
        <span class="title">${data.id}</span>
        <span class="content">${data.msg}</span>
        </p>`);
});

这里我使用了insertAdjacentHTML，这个可能大家没怎么见过，但是很好用，它可以帮你把内容插入到指定位置，当然不是任意位置，有四个位置

//beforebegin
<div>
    //afterbegin
    content
    //beforeend
</div>
//afterend

每次发送到页面消息总是添加到聊天界面的最后。

其他

我们启动服务器之后，都知道退出直接按ctrl+c，但是总会有不小心嘛。我们肯定遇到过有按两次ctrl+c退出和按一次控制台问你是否退出，按y/n。这里也做一个简单的实现（前提：在node中使用process.exit()来退出）。

按两次ctrl+c退出

首先是监听ctrl+c事件

process.on('SIGINT',callback);

在回调函数中我们可以做一些控制，使得用户两次ctrl+c之后再退出

let isExit = false;
process.on('SIGINT', () => {
    if(isExit){
        isExit = false;
        process.exit();
    }else{
        isExit = true;
        process.stdout.write('Please ^C again to exit this process\n');
        let timer = setTimeout(function(){
            clearTimeout(timer);
            isExit = false;
        },3000);
    }

})

当然我们为了防止用户按了一次之后很久没按，再次按的时候会退出，三秒之后会重置。

按一次退出并询问

这个跟上面相似，只不过，在按了一次之后提示用户要输入y/n,这里监控用户输入即可。

let isExit = false;
let reset = () => {
    let timer = setTimeout(() => {
        clearTimeout(timer);
        isExit = false;
    }, 5000)
}
process.on('SIGINT', () => {
    isExit = true;
    reset();
    process.stdout.write('Are you sure exit this process? Y/N\n');

})

process.stdin.on('data', (data) => {

    if(!data){

    }else if(data.toString().trim().toLowerCase() === 'y'     && isExit){
        process.exit();
    }else{
        process.stdout.write('\n');
    }
})

注意点就是监控输入的时候，回调函数中的data不是string，要转一下，data.toString().trim()。
详细代码地址https://github.com/Stevenzwzhai/socket.io_chatRoom

最后编辑于：2017.12.06 21:43:31