欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年05月11日 11:07:46   作者:鵬程933  
本文主要介紹了Node.js用Socket.IO做聊天軟件的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

效果

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("輸入用戶名");
    //拿到用戶名后進(jìn)行非空驗(yàn)證
    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();//取消默認(rèn)提交事件
            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');
});

實(shí)現(xiàn)方法

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

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

相關(guān)文章

  • 詳解nodejs微信公眾號(hào)開發(fā)——3.封裝消息響應(yīng)模塊

    詳解nodejs微信公眾號(hào)開發(fā)——3.封裝消息響應(yīng)模塊

    上一篇文章:nodejs微信公眾號(hào)開發(fā)(2)自動(dòng)回復(fù),實(shí)現(xiàn)了簡單的關(guān)注回復(fù)。采用拼接字符串的形式,并不是很方便,這里我們將其封裝承接口。
    2017-04-04
  • Nodejs sublime text 3安裝與配置

    Nodejs sublime text 3安裝與配置

    Sublime Text是一個(gè)輕量、簡潔、高效、跨平臺(tái)的編輯器,方便的配色以及兼容vim快捷鍵等各種優(yōu)點(diǎn)博得了很多前端開發(fā)人員的喜愛!Sublime Text這款程序員必備代碼編輯器,幾乎每位程序員提到Sublime Text都是贊不絕口!它體積小巧,無需安裝,綠色便攜
    2014-06-06
  • node.js中的buffer.fill方法使用說明

    node.js中的buffer.fill方法使用說明

    這篇文章主要介紹了node.js中的buffer.fill方法使用說明,本文介紹了buffer.fill的方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下
    2014-12-12
  • Node.JS獲取GET,POST數(shù)據(jù)之queryString模塊使用方法詳解

    Node.JS獲取GET,POST數(shù)據(jù)之queryString模塊使用方法詳解

    本文將詳細(xì)介紹nodeJS中的queryString模塊使用方法,包括Node.JS獲取GET,POST數(shù)據(jù)的方法,需要的朋友可以參考下
    2020-02-02
  • 關(guān)于Mac下安裝nodejs、npm和cnpm的教程

    關(guān)于Mac下安裝nodejs、npm和cnpm的教程

    本文通過圖文并茂的形式給大家介紹了Mac下安裝nodejs、npm和cnpm的教程,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
    2018-04-04
  • centos 上快速搭建ghost博客方法分享

    centos 上快速搭建ghost博客方法分享

    本文給大家分享的是如何在centos上快速搭建基于Node.js 構(gòu)建的開源博客平臺(tái)ghost的方法,非常的實(shí)用,有需要的小伙伴可以參考下
    2018-05-05
  • Node.js 異步異常的處理與domain模塊解析

    Node.js 異步異常的處理與domain模塊解析

    本篇文章主要介紹了Node.js 異步異常的處理與domain模塊解析,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • nodejs acl的用戶權(quán)限管理詳解

    nodejs acl的用戶權(quán)限管理詳解

    這篇文章主要介紹了nodejs acl的用戶權(quán)限管理詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • 如何配置nodejs的環(huán)境變量

    如何配置nodejs的環(huán)境變量

    這篇文章主要介紹了如何配置nodejs的環(huán)境變量問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • NodeJS仿WebApi路由示例

    NodeJS仿WebApi路由示例

    本篇文章主要介紹了NodeJS仿WebApi路由示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02

最新評(píng)論