node.js的socket实时通信demo（一看就会）

最新推荐文章于 2024-02-20 21:05:51 发布

K.P

最新推荐文章于 2024-02-20 21:05:51 发布

阅读量949

点赞数

分类专栏： npm nodejs 文章标签： node.js npm socket

本文链接：https://blog.csdn.net/weixin_44314609/article/details/109374314

版权

npm 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

nodejs

7 篇文章 0 订阅

订阅专栏

最近开始nodejs的学习，像使用微信之类的实时通讯功能技术一直都是我向往的，今天总结一份简单的nodejs结合socket实现实时通信的demo，做个笔记。

样式展示
在这里插入图片描述

安装

npm install express
npm install socket.io

代码

创建index.js文件

const express = require('express')
const socket = require('socket.io')
const app = express()

// 服务器识别静态文件
app.use(express.static('public'))  // 识别public文件

const server = app.listen(3000, () => console.log('3000端口运行...'))

// 设置socket.io
// 创建
const io = socket(server)
// 注册连接事件
io.on('connection', (socket) => {
    console.log('a user connected', socket.id);
    
    // 断开连接
    socket.on('disconnect', () => {
      console.log('user disconnected');
    });

    // 监听chat事件 获取从客户端发来的信息
    socket.on('chat', (data) => {
        // console.log(JSON.stringify(data))
        // 再发送回客户端
        io.sockets.emit('chat', data)
    })

    // 监听键盘事件
    socket.on('typing', (value) => {
      socket.broadcast.emit('typing', value)
    })
  });

在根目录创建public文件夹，里面创建index.html, style.css 和 chat.js

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js" integrity="sha256-bQmrZe4yPnQrLTY+1gYylfNMBuGfnT/HKsCGX+9Xuqo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/style.css">
    <title>在线聊天室</title>
</head>
<body>
    <div id="msonline-chat">
        <h2>在线聊天室</h2>
        <div id="chat-window">
            <div id="output"></div>
            <div id="feedback"></div>
        </div>
        <input type="text" id="handle" placeholder="Handle">
        <input type="text" id="message" placeholder="Message">
        <button id="send">Send</button>
    </div>
    <script src="./chat.js"></script>
</body>
</html>

// style.css 省略

// chat.js
// 获取节点
var message = document.getElementById('message'),
      handle = document.getElementById('handle'),
      btn = document.getElementById('send'),
      output = document.getElementById('output'),
      feedback = document.getElementById('feedback');

// 链接socket
const socket = io.connect('http://localhost:3000')

// 添加btn点击事件
btn.addEventListener('click', () => {
    const data = {message: message.value, handle: handle.value}
    socket.emit('chat', data)
    this.message.value = ''
})

// 获取服务端得到的信息
socket.on('chat', (data) => {
    feedback.innerHTML = ''
    output.innerHTML += `<p><strong>${data.handle}: ${data.message}</strong></p>`
})


// 监听键盘事件
message.addEventListener('keypress', () => {
    socket.emit('typing', handle.value)
})

// 获取服务器的广播信息
socket.on('typing', (value) => {
    feedback.innerHTML = `<p><em>${value} 正在输入中。。。</em></p>`
})

然后运行打开两个 localhost:3000 的网站，就可以实现自己与自己聊天了~~