Node.js用Socket.IO做聊天軟件的實現示例

Posted on by

效果

index.html文件

該頁面主要是渲染聊天界面

<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

        #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
        #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
        #input:focus { outline: none; }
        #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages > li { padding: 0.5rem 1rem; }
        #messages > li:nth-child(odd) { background: #efefef; }
        .message{font-size: 40px;color: skyblue}
        .name{font-size: 15px;color: pink}
    </style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
    <input id="input" autocomplete="off" name="main" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
    let name=prompt("輸入用戶名");
    //拿到用戶名後進行非空驗證
    if(name == '' || name == null){
        alert("先輸入用戶名")
    }else {
    	//初始化socket模塊
        var socket = io();
        socket.emit('name message',name);//向服務器發送消息（用戶名信息）
        let form = document.getElementById('form');
        let inputMain = document.querySelector('input[name="main"]');
        form.addEventListener('submit', function(e) {
            e.preventDefault();//取消默認提交事件
            if (inputMain.value) {//如果文本框中有消息
                socket.emit('chat message', inputMain.value);//向服務器發送消息（聊天信息）
                inputMain.value = '';
            }

        });
        //渲染服務器端發送的用戶名信息（不僅是自己的，還有別的用戶的）
        socket.on('name message',function (msg){
            var item = document.createElement('li');
            item.classList.add("name")
            item.textContent = msg;
            messages.appendChild(item);
        })
        //渲染服務器端發送的聊天信息（不僅是自己的，還有別的用戶的）
        socket.on('chat message', function(msg) {
            var item = document.createElement('li');
            item.classList.add("message")
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    }
</script>
</body>
</html>

index.js

該文件主要用於聊天信息後端處理

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
//引入socket.io
const {Server}=require('socket.io')
const io=new Server(server)

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});
io.on('connection',(socket)=>{
    let name;
    socket.on('name message', (msg) => {
       name=msg;
       io.emit('name message', name+"已上線");
        socket.on("disconnect", (reason) => {
            io.emit('name message', name+"已斷開");
        });
    });

    socket.on('chat message', (msg) => {
        io.emit('name message', name);
        io.emit('chat message', msg);
    });

})
server.listen(3000, () => {
    console.log('listening on *:3000');
});

實現方法

  • 需要先下載三方模塊，實現雙方同行主要依賴於這個模塊npm i socket.io
  • 對於客戶端分為發送信息和接收信息
  • 發送請求，當監聽到提交事件後，拿到文本框內容，通過socket.emit()向服務端發送信息，這裡參數為事件名，傳輸內容，這裡還有一個可選的回調函數
  • 接受信息，socket.on()監聽服務端發送過來的信息，這裡參數為事件名，回調函數，服務端信息保存在回調函數裡，通過創建一個li然後將服務端發的信息賦給li，再渲染到頁面
  • 對於服務端當用戶上線或者下線時向所有用戶發送提示信息和實時接受信息並發送給所有用戶
  • 引入socket.io模塊後，需要將模塊中的Srever結構出來，然後將原生http請求服務註冊在socket的服務中
  • 當客戶端默認請求時，將index.html也就是聊天界面發送個客戶端
  • 客戶端通過io.on(‘connection’,socket=>{})對服務端信息進行處理
  • socket.on(‘name message’, msg=>{}）第一次上線發送
  • socket.on(“disconnect”,reason=>{}）斷開連接發送
  • socket.on(‘chat message’,msg=>{})實時處理客戶端發送的信息

 到此這篇關於Node.js用Socket.IO做聊天軟件的實現示例的文章就介紹到這瞭,更多相關Node.js Socket.IO聊天內容請搜索LevelAH以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持LevelAH！

推薦閱讀：