快捷導(dǎo)航

Node.js用Socket.IO做聊天軟件的實現(xiàn)示例

更新時間：2022年05月11日 11:07:46 作者：鵬程933

本文主要介紹了Node.js用Socket.IO做聊天軟件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

效果

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);//向服務(wù)器發(fā)送消息（用戶名信息）
        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);//向服務(wù)器發(fā)送消息（聊天信息）
                inputMain.value = '';
            }

        });
        //渲染服務(wù)器端發(fā)送的用戶名信息（不僅是自己的，還有別的用戶的）
        socket.on('name message',function (msg){
            var item = document.createElement('li');
            item.classList.add("name")
            item.textContent = msg;
            messages.appendChild(item);
        })
        //渲染服務(wù)器端發(fā)送的聊天信息（不僅是自己的，還有別的用戶的）
        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');
});

實現(xiàn)方法

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

到此這篇關(guān)于Node.js用Socket.IO做聊天軟件的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)Node.js Socket.IO聊天內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: