【socket.js联合express】:搭建简约版聊天室

这篇具有很好参考价值的文章主要介绍了【socket.js联合express】:搭建简约版聊天室。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简约版聊天室

1.案例描述

本次项目利用express与socket.js
实现简约版聊天室,有用户登录及提示
用户退出及提示。聊天的显示

【socket.js联合express】:搭建简约版聊天室

聊天室

2.静态页面

该页面主要有四大块区域
头部用户输入登录与退出功能
左侧用户聊天显示区域
右侧用户列表显示区域
底部用户输入聊天内容区域

【socket.js联合express】:搭建简约版聊天室

2.1功能描述

当用户在头部的输入框输入内容
后,点击登录,右侧列表出现用户名字
左侧出现登录提示。点击底部输入聊天内容
点击发送左侧出现该用户的聊天内容。
点击头部退出按钮时用户列表该用户退出
左侧显示退出提示。

2.2静态页面代码

HTML:

<body onload="window_onload()" onunload="window_onunload()">
    <h1>聊天室</h1>
    <div id="divContainer1">
        <table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
            <tr id="trDlg">
                <td id="tdDlg" width="5">
                    用户名:&nbsp;
                    <input type="text" value="游客" size="20" id="tbxUsername">
                    <input type="button" id="btnLogin" value="登录" onclick="btnLogin_onclick()">
                    <input type="button" id="btnLogout" onclick="btnLogout_onclick()" disabled value="退出">
                </td>
            </tr>
        </table>
    </div>

    <div id="divLeft">
        <div id="divchat"></div>
        <div id="divContainer3">
            <table id="tbDlg" border="0" cellpadding="3" cellspacing="0" width="0">
                <tr id="trDlg">
                    <td valign="top" id="tdDlg" nowarp>对话</td>
                    <td valign="top" id="tdDlg" >
                        <textarea id="tbxMsg" cols="255" rows="5" style="width:100%"></textarea>
                    </td>
                    <td valign="top" id="tdDlg" nowarp>
                        <input type="button" id="btnSend" value="发送" disabled onclick="btnSend_onclick()">
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div id="divRight">
        用户列表:
    </div>
</body>
<script src="/socket.io/socket.io.js"></script>

css:

h1{
    font-size: 14pt;
    color:#006bb5;
    background-color: #f0f0f0;
    border:1px solid #f0f0f0;
    padding:5px;
    margin-bottom: 18px;
    border-radius: 5px;
    color:purple
}
div[id^=divContainer]{
    border:0;
    margin:10px 0px 10px 0px;
    padding:3px;
    background-color: #f0f0f0;
    border-radius: 5px;
}
div#divLeft{
    width:85%;
    background-color: #f0f0f0;
    float: left;
}
div#divright{
    width:15%;
    background-color: white;
    float: right;
    font-size: 14px;
}
div#divchat{
    border:0;
    margin:10px 0 10px 0;
    padding:3px;
    background-color: #f0f0f0;
    border-radius: 5px;
    position: relative;
    height:300px;
    overflow: auto;
    font-size: 14px;
    font-size: 16px;
}
table#tbDlg{
    background-color: #f0f0f0;
    font-size: 14px;
}
tr#trDlg,td#tdDlg{
    font-size: 14px;
}
textarea{
    border:1px solid #444;
    border-radius: 10px;
    margin:5px;
    color:black;
    background-color: white;
    width:100px;
    font-size:16px;

}

input[type="button"]{
    border:1px solid #808080;
    border-radius: 20px;
    width:80px;
    background-color: #81a0b5;
}
input[type="button"]:hover{
    background-color: #006bb5;
}
input[type="button"]:active{
    margin:1px;
    font-weight: bold;
    background-color: #006bb5;
}
input[type="button"]:focus{
    margin:0;
    font-weight: bold;
    background-color: #006bb5;
}

3.服务端代码

下载express npm i express
下载socket.io npm i socket.io

关于socket的使用,可参考官网

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


app.use(express.static(__dirname)); 

app.get('/',(req,res)=>{
    res.sendFile(__dirname+'./index.html')
})
server.listen(8081,()=>{
    console.log("it is ok")
})

var names=[]

io.sockets.on('connection',(socket)=>{
    socket.on('login',name=>{
        for(var i=0;i<names.length;i++){
            if(names[i]==name){
                socket.emit('duplicate')
                return
            }
        }
        names.push(name)
        io.sockets.emit('login',name)
        io.sockets.emit('sendClients',names)
    })
    socket.on('chat',data=>{
        io.sockets.emit('chat',data)
        console.log(data)
    })
    socket.on('logout',name=>{
        for(var i=0;i<names.length;i++){
            if(names[i]==name){
                names.splice(i,1)
                break
            }
        }
        socket.broadcast.emit('logout',name)
        io.sockets.emit('sendClients',names)
    })
})

代码解析

该后端代码中,用names数组存放所有登录的用户名,用户登录时客户端与服务端建立连接,指定服务器接收到登录事件时(login)的处理逻辑。比如用户是否重复,发送duplicate事件。如果一切正常服务端发送sendClient事件
用来更新用户列表。当用户输入聊天内容后点击发送向服务器发送chat事件。服务端接收后向所有客户端发送chat事件。当用户点击退出
是向服务器发送logout事件,服务端接收,向所有客户端发送logout事件,以便处理用户退出后的逻辑。最后向所有客户端发送sendClients事件,实现界面更新。

4.js部分

启动只需在该文件所在目录终端
输入node server.js(你存放服务器代码文件的名字)
之后在游览器输入服务器监听的端口号

var userName,socket,tbxUsername,tbxMsg,divChat
function window_onload(){
    divChat=document.getElementById('divchat')
    tbxUsername=document.getElementById('tbxUsername')
    tbxMsg=document.getElementById('tbxMsg')
    tbxUsername.focus()
    tbxUsername.select()    
}
var color=['green','#006bb5','brown','crimson','purple']

function AddMsg(msg){
    console.log(parseInt(Math.random(0,1)*color.length))
    divChat.innerHTML+=msg+'<br/>'
    divChat.style.color=color[parseInt(Math.random(0,1)*color.length)]
    if(divChat.scrollHeight>divChat.clientHeight){
        divChat.scrollTop=divChat.scrollHeight-divChat.clientHeight
    }
}

function btnLogin_onclick(){
    if(tbxUsername.value.trim()==''){
        alert('请输入用户名')
        return
    }
    socket =io()
    userName=tbxUsername.value.trim()
    socket.on('connect',function(){
        AddMsg('连接聊天服务器')
        socket.on('login',function(name){
            AddMsg('欢迎'+name+'进入')
        })
        socket.on('sendClients',function(names){
            var divRight=document.getElementById('divRight')
            var str=''
            names.forEach((name)=>{
                str+=name+'<br/>'
            })
            divRight.innerHTML="用户列表:<br/>"
            divRight.innerHTML+=str
        })
        socket.on("chat",data=>{
            AddMsg(data.user+'说:'+data.msg)
        })
        socket.on("disconnect",()=>{
            AddMsg("与服务器断开连接")
            document.getElementById('btnSend').disabled=true
            document.getElementById('btnLogout').disabled=true
            document.getElementById('btnLogin').disabled=''
            var divRight=document.getElementById('divRight')
            divRight.innerHTML="用户列表"
        })
        socket.on("logout",name=>{
            AddMsg("用户"+name+'已退出')
        })
        socket.on("duplicate",()=>{
            AddMsg("改用户名已被使用")
            document.getElementById('btnSend').disabled=true
            document.getElementById('btnLogout').disabled=true
            document.getElementById('btnLogin').disabled=''
            divRight.innerHTML="用户列表"
        })
    })
    socket.on("error",()=>{
        AddMsg("与服务器连接失败")
       socket.disconnect()
       socket.removeAllListeners("connect")
       io.sockets={}
    })
    socket.emit('login',userName)
    document.getElementById('btnSend').disabled=''
    document.getElementById('btnLogout').disabled=''
    document.getElementById('btnLogin').disabled=true
}
function btnSend_onclick(){
    var msg=tbxMsg.value
     socket =io()
    if(msg.length>0){
        socket.emit('chat',{user:userName,msg:msg})
        tbxMsg.value=''
    }
}

function btnLogout_onclick(){
     socket =io()
    socket.emit('logout',userName)
    socket.disconnect()
    io.socket={}
    AddMsg("用户"+userName+'已退出')
    var divRight=document.getElementById('divRight')
    divRight.innerHTML="用户列表"
    document.getElementById('btnSend').disabled='disabled'
    document.getElementById('btnLogout').disabled='disabled'
    document.getElementById('btnLogin').disabled=''
}
function window_onunload (){
    socket.emit('logout',userName)
    socket.disconnect()
}

代码解析:
主要有六大函数,文章来源地址https://www.toymoban.com/news/detail-471366.html

window_onload 用与文档一加载变后去对应的元素
AddMsg 用于将用户输入的文字,服务器返回的信息进行显示
btnLogin_onclick 用于与服务器建立连接,监听sendClients,login,chart等事件用于进行相应的js操作
btnSend_onclick 向服务器发送输入框的文字
btnLogout_onclick 断开与服务器的连接,进行html样式的改写
window_onunload

到了这里,关于【socket.js联合express】:搭建简约版聊天室的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C语言Socket编程TCP简单聊天室

    这是一个使用C语言进行套接字编程实现的简单聊天室, 使用Pthread库进行多线程执行 服务端: svr.c 客户端: cli.c Makefile: Makefile 执行编译 启动服务器 启动客户端 聊天 退出

    2024年02月03日
    浏览(51)
  • Python多人聊天室-基于socket UDP协议

    使用Python编写的基于socket UDP通信的多功能即时聊天室,包含Tkinter编写的图形化聊天界面,功能包括有账号注册和登录,登录成功后可以查看在线用户,并和聊天室内的其他在线用户聊天,包含私聊和群发,能发送文字、表情包,以及文件等。 登录和注册 显示在线用户 群聊

    2024年02月11日
    浏览(54)
  • Linux-Socket实现模拟群聊(多人聊天室)

    简单版本 服务端源码 客户端源码 服务器可以在特定的端口监听客户端的连接请求,若连接成功,服务器采用广播的形式向当前所有连接客户端发送该客户端登录成功消息多个客户端可以同时登录,在源码文件中可以配置最多群聊同时在线人数。服务端接收到客户端发送的群

    2024年02月10日
    浏览(90)
  • python 使用socket制作聊天室-(附带 源码 可以直接运行)

    为什么socket能做聊天室呢 socket提供了通信的服务 比如你可以创建tcp udp的请求 向某个主机发起通信 就像是你想和某人说话 你得会发音 就是提供了服务端的方式和客户端的方式 服务端处理用户发起的请求 客户端发送数据和接收服务端的响应数据 就像你打开浏览器看视频 你

    2024年02月08日
    浏览(38)
  • 基于Java Socket写一个多线程的聊天室(附源码)

    Socket编程是在TCP/IP上的网络编程,但是Socket在上述模型的什么位置呢。这个位置被一个天才的理论家或者是抽象的计算机大神提出并且安排出来 ​ 我们可以发现Socket就在应用程序的传输层和应用层之间,设计了一个Socket抽象层,传输层的底一层的服务提供给Socket抽象层,S

    2024年02月10日
    浏览(50)
  • [Socket]Python用UDP协议建立带有私聊功能的网络聊天室-建立聊天工具

    前些天实习面试的时候被面试官问到Socket编程的问题,即“Socket创建和释放的具体过程是什么”,当时答不上来,似乎是涉及到发送和接收缓冲区的问题。由于自己在Socket编程这一块知识较为薄弱,于是写下这篇文章,当作复习下Socket编程知识。 首先,该实验是我在大三上学

    2024年02月03日
    浏览(47)
  • Python web实战 | 使用 Flask 实现 Web Socket 聊天室

        今天我们学习如何使用 Python 实现 Web Socket,并实现一个实时聊天室的功能。本文的技术栈包括 Python、Flask、Socket.IO 和 HTML/CSS/JavaScript。   Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的一部分,并且可以在浏览器和服务器之间创建实时的交互式

    2024年02月14日
    浏览(52)
  • .NET编程——利用C#实现基于Socket类的聊天室(WinForm)

    在学习C#和MySQL实现注册登录和TCP协议的Socket通信后,本文将介绍如何利用Socket类中的异步通信函数来实现本地聊天室功能, Socket通信限制了客户端与客户端之间的通信,客户端只能接收来自服务器的消息而不能接收到客户端发送的消息,因此服务器最佳的选择是起到一个中

    2023年04月21日
    浏览(73)
  • 【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室

    这篇文章主要是用WebSocket技术实现一个 即时通讯聊天室 ,首先先要了解为什么使用WebSocket而不是普通的HTTP协议,如果使用HTTP协议它是下面这种情况: 我发送一条消息,发送一个发送消息的请求;* 一直轮询接收别人发送的消息,不管有没有发送都要定时去调用接口。这里明

    2023年04月20日
    浏览(57)
  • 【Unity 3D】利用C#、Unity和Socket实现简单的在线聊天室工具(附源码 简单易懂)

    需要源码请点赞关注收藏后评论区留言并且私信~~~ 下面利用Unity和C#语言做一个简单的聊天室程序,主要用到的技术就是Socket通信连接,需要一个客户端和一个服务器端,服务器端就使用C#语言的控制台完成 下面就开始搭建C#语言服务器端 1:新建一个C#语言控制台程序 2:命名

    2024年02月05日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包