Socket.IO聊天室~簡單實用

時間 2019-11-18

原文原文鏈接

小編心語：你們過完聖誕準備迎元旦吧~小編在這裏預祝你們元旦快樂！！這一次要分享的東西小編也不是很懂啊，總之小編把它拿出來是覺地比較稀奇，並且程序也沒有那麼難，是一個比較簡單的程序，你們能夠多多試試~
javascript

簡介：Socket.IO實現了實時雙向的基於事件的通信機制。旨在讓各類瀏覽器與移動設備上實現實時app功能，模糊化各類傳輸機制。
下面咱們使用Node.js和Socket.IO來作一個簡單的聊天室。
1、初始化項目html

（這個是在實驗樓網站的虛擬平臺須要實現的~可自動略過這一環節，不須要也能夠的哈）

打開虛擬機終端，新建一個文件夾socketio，進入此文件夾使用npm初始化項目：java

$ npm init

而後輸入項目相關信息，也能夠不輸入，直接一路回車，完成後會在此目錄下生產一個package.json文件。這個文件用於描述項目相關信息，以及聲明項目中所使用的模塊。
而後安裝Socket.IO：node

$ npm install socket.io --save

安裝Socket.IO的時候，--save參數用於保存模塊依賴信息到package.json文件，安裝完後，打開package.json文件會看到裏面多了一項內容：jquery

"dependencies": { "socket.io": "^1.2.1" }

同時Socket.IO安裝在了node_modules文件夾下。
2、建立http servernpm

安裝Socket.IO模塊，咱們如今先來建立一個可訪問的頁面吧。
在文件夾socketio中新建index.js文件，這就是在服務端運行的主文件。
首先在index.js中添加以下代碼，引入所需的模塊：json

var http = require('http');           // http 模塊，用於建立http server
var socketio = require('socket.io');  // socket.io 模塊
var fs = require('fs');               // fs 模塊，用於讀取文件

而後經過http模塊建立app，在index.js文件中添加代碼：瀏覽器

// http.createServer()方法用於建立http server
// 以處理來自瀏覽器的請求
var app = http.createServer(function(req, res) {
    // fs.readFile()方法用於讀取文件
    // 此處讀取的是index.html文件
    // 也就是咱們後面要編寫的HTML頁面文件
    fs.readFile(__dirname + '/index.html', function (err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Error loading index.html');
        }
        res.writeHead(200); // 返回請求狀態碼
        res.write(data);    // 返回讀取到的內容給瀏覽器
        res.end();
    });
}).listen(8080); // listen()方法用監聽http server到指定的地址和端口，默認地址是localhost

在文件夾socketio中新建index.html文件，代碼以下：bash

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Socket.IO chat</title>
    </head>
    <body>
        Hello, shiyanlou.
    </body>
</html>

運行程序：服務器

$ node index.js

而後打開虛擬機中的瀏覽器，訪問「127.0.0.1:8080」瀏覽器頁面中出現「Hello, shiyanlou.」，說明建立的http server成功了。
3、實現聊天

下面咱們就來建立Socket.IO對象吧：

// 在與app相同的地址和端口上建立Socket.IO服務
var io = socketio(app);

// 監聽connection事件
// 當瀏覽器鏈接到此Socket.IO服務時觸發該事件
io.on('connection', function (socket) {
    // 監聽瀏覽器端的chat事件
    socket.on('chat', function (data) {
        console.log(data);
    });
});

這裏在服務器端監聽了來自瀏覽器的chat事件，後面咱們會在index.html中實現此事件。
先來實現一個簡單聊天界面吧，修改index.html文件中的代碼以下所示：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Socket.IO chat</title>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font: 13px Helvetica, Arial; }
            #form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
            #form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
            #form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
            #messages { list-style-type: none; margin: 0; padding: 0; }
            #messages li { padding: 5px 10px; }
            #messages li:nth-child(odd) { background: #eee; }
        </style>
        <!-- 引入socket.io庫和jQuery庫 -->
        <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- 顯示消息記錄 -->
        <ul id="messages"></ul>

        <!-- 消息發送框 -->
        <div id="form">
            <input id="m" autocomplete="off" /><button id="send">Send</button>
        </div>
    </body>
</html>

而後在瀏覽器端建立chat事件，在index.html文件中添加以下JavaScript代碼：

<script>
// 鏈接到Socket.IO服務器
var socket = io.connect();

$(function() {
    // 綁定發按鈕發送消息的事件
    $('#send').on('click', function() {
        var data = $('#m').val();

        // 建立chat事件併發送消息給服務器
        // emit('event') 表示發送了一個event命令
        // 使用io.on('event')接收對應事件的信息
        // 因此客戶端服務器端須要使用socket.on('chat')接收聊天信息
        socket.emit('chat', { msg: data });
        $('#m').val('');
    });
});
</script>

如今運行項目：

$ node index.js

使用虛擬機中的瀏覽器訪問「127.0.0.1:8080」，經過聊天框發送消息，會看到服務器端會打印出相應消息內容。
下面咱們來實現把用戶發送的消息發送給全部客戶端，在index.js文件中建立sendmsg事件：

io.on('connection', function (socket) {
    socket.on('chat', function (data) {
        console.log(data);

        // 建立sendmsg事件並把發送聊天消息給客戶端
        io.emit('sendmsg', data);
    });
});

客戶端接收並顯示消息，在index.html中添加JavaScript代碼：

$(function() {
    // ...

    // 接收消息並顯示到消息記錄框中
    socket.on('sendmsg', function(msg) {
        $('#messages').append($('<li>').text(msg.msg));
    });
});

再從新運行項目：