Node.js笔记(四)局域网聊天室2:服务端接受客户端消息

目标

客户端服务端建立连接加载,服务端能接受客户端传过来的消息

代码

  • JS部分<chatroom.js>
javascript 复制代码
const express = require('express')
const http = require('http')
const {Server} = require('socket.io')

const app = express()
const server = http.createServer(app)
const io = new Server(server)

app.use(express.static(__dirname))
io.on('connect',(socket)=>{
    console.log('an user connected')
    \\监听客户端的信息,注意函数的第一个事件参数名要与Html部分里的事件名保持一致
    socket.on('chat message',(msg)=>{
        console.log('Message received:',msg)
    })
    socket.on('disconnect',()=>{
        console.log("an user disconnected")
    })
}
    
)

const port =3001
server.listen(port,()=>{
    console.log(`server is running at http://localhost:${port}`)
})

socket.on()的第一个参数是事件名,事件名有一些是库里预先定好的可以比如connectdisconnect等,其他的都可以自己定义。同时非常关键的一点,如果是想让htmljs产生互动,就必须保持事件名的一致性

  • Html部分<index.html>
html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <h1>Chat Room</h1>
        <input id="inputtext" placeholder="Enter your message">
        <button id="sendbtn">Send</button>
        <script>
            const socket = io()
            const input = document.getElementById('inputtext')
            const sendbtn = document.getElementById('sendbtn')
            sendbtn.addEventListener("click",()=>{
                const message = input.value
                if(message){
                    socket.emit("chat message",message)
                    input.value=''
                }
            })
            socket.on('chat message',(msg)>{

            })
        </script>
    </body>
</html>

效果

  • JS部分<chatroom.js>

  • Html部分<index.html>

相关推荐
天天爱吃肉821819 分钟前
第十篇:电源设计的“能量矩阵”——无线充电与碳化硅LLC谐振
笔记·矩阵·汽车
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
好评笔记9 小时前
深度学习笔记——循环神经网络之LSTM
笔记·rnn·深度学习
Dawndddddd9 小时前
网络安全之攻防笔记--通用漏洞SQL注入之MySQL&mssql&postgresql
笔记·sql·web安全
星云之11 小时前
Fiddler笔记
笔记·fiddler
ThomasChan12312 小时前
vue3.x 的 toRef详细解读
前端·javascript·vue.js·node.js·vue·bootstrap·less
人有一心12 小时前
cs224w课程学习笔记-第1课
笔记·学习
Sherlock Ma13 小时前
Java零基础入门笔记:(4)方法
java·开发语言·笔记·程序人生·跳槽·学习方法·改行学it