利用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