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>

相关推荐
CSDN_PBB4 小时前
[STM32 - 野火] - - - 固件库学习笔记 - - - 十五.设置FLASH的读写保护及解除
笔记·stm32·学习
夜流冰9 小时前
编程参考 - C语言可变参数
笔记
格雷亚赛克斯9 小时前
Qt笔记31-69
数据库·笔记·qt
Long_poem9 小时前
【自学笔记】版本控制与持续集成基础知识点总览-持续更新
笔记·ci/cd
Stream٩( 'ω' )و10 小时前
109~133笔记
笔记
weixin_5025398510 小时前
rust学习笔记2-rust的包管理工具Cargo使用
笔记·学习·rust
孤独得猿11 小时前
排序算法复习——包括插入排序、希尔排序、冒泡排序、快排(包括霍尔法、挖坑法、快慢指针法)、堆排、选择排序、归并排序等 (代码采用c/c++混编)
c语言·数据结构·c++·笔记·算法·排序算法
19999er12 小时前
框架&ThinkPHP(小迪网络安全笔记~
开发语言·笔记·安全·web安全·php
web_1553427465613 小时前
【合集】Java进阶——Java深入学习的笔记汇总 & 再论面向对象、数据结构和算法、JVM底层、多线程、类加载、
java·笔记·学习
rellvera13 小时前
【强化学习的数学原理】第08课-值函数近似-笔记
笔记