socket.io做一個簡單的聊天案例

 聊天功能開發

新建一個文件夾，就叫：chat-room吧

 

一、初始化  npm init 並下載express和 socket.io安裝包

npm install express --save
npm install socket.io --save

　新建服務器文件server.js和靜態文件，目錄結構如下：

 

二、先把靜態頁面弄出來

這里引用了bootstrap的布局樣式，布局樣式直接使用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

　

<style>
/*這里簡單寫下用戶名和發送內容的樣式*/
.user { color: #00a1f4; cursor: pointer; }
.content { display: inline-block; padding: 6px 10px; background-color: #00a1f4; border-radius: 8px; color: #fff; }
</style>

<div class="container" style="margin-top: 30px;">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="text-center">聊天界面</h4>
                </div>
                <div class="panel-body">
                    <ul id="list" class="list-group" style="height: 300px;overflow: auto;"></ul>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-xs-10">
                            <input type="text" class="form-control" id="input">
                        </div>
                        <div class="col-xs-1">
                            <button class="btn btn-info" id="sendBtn">發送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

　

弄完后，差不多就是這樣子：

 三、服務端代碼（server.js）

const express = require('express');
const app = express();
// 設置靜態文件夾，會默認找當前目錄下的index.html文件當做訪問的頁面
app.use(express.static(__dirname));

// WebSocket是依賴HTTP協議進行握手的
const server = require('http').createServer(app);
const io = require('socket.io')(server);

//客戶端 1 的訪問地址
app.get("/client1",function (req,res,next) {
  res.sendFile(__dirname+"/views/client1.html");
});
//客戶端 2 的訪問地址
app.get("/client2",function (req,res,next) {
  res.sendFile(__dirname+"/views/client2.html");
});

// 監聽與客戶端的連接事件
io.on('connection', socket => {
    console.log('服務端連接成功');
    // 服務端發送message事件，把msg消息再發送給客戶端
    socket.on("sendMsg",function (data) {
      // data 為客戶端發送的消息
      console.log(data)
      // 使用 emit 發送消息
      io.emit("message",data);
    })
});
//監聽3000端口
server.listen(3000);　

　　

用vscode打開終端，啟動服務

 

四、客戶端代碼（client1.html）

引入socket.io

<!-- 引入socket.io.js -->
<script src="/socket.io/socket.io.js"></script>

　

　　let socket = io.connect();
    let list = document.getElementById('list'),
        input = document.getElementById('input'),
        sendBtn = document.getElementById('sendBtn');

    // 發送消息的方法
    function send() {
        let value = input.value;
        if (value) {
            // 發送消息給服務器
            let data={
                user:"張學友", 
                id:1, 
                msg:input.value,
                createAt: new Date().toLocaleString()
            };
            socket.emit('sendMsg', data);
            input.value = '';
        } else {
            alert('輸入的內容不能為空！');
        }
    }
     
    // 點擊按鈕發送消息
    sendBtn.onclick = send;

    // 鍵盤回車發消息
    function enterSend(e) {
        if(e.keyCode == 13) send()
    }

    input.onkeydown = function(event) {
        enterSend(event)
    }

    // 監聽事件，用來接收其他客戶端推送的消息
    socket.on("message",function (data) {
        let li = document.createElement('li');
        li.className = 'list-group-item';
        li.innerHTML = `<p style="color: #ccc;"><span class="user" style="color:${data.color}">${data.user} </span>${data.createAt}</p>
                        <p class="content" style="background-color: ${data.color}">${data.msg}</p>`;
        list.appendChild(li);
        // 將聊天區域的滾動條設置到最新內容的位置
        list.scrollTop = list.scrollHeight;
    });

　　

先發個消息試試看，服務端能接收到消息，頁面也顯示出來了

 

 

 

 

復制一份到client2中，改下用戶名，互發消息試試看

 這樣就實現了用socket.io做一個簡單的聊天功能。