Node.js用Socket.IO做聊天软件的实现示例

目录
  • 效果
  • index.html文件
  • index.js
  • 实现方法

效果

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("输入用户名");
    //拿到用户名后进行非空验证
    if(name == '' || name == null){
        alert("先输入用户名")
    }else {
    	//初始化socket模块
        var socket = io();
        socket.emit('name message',name);//向服务器发送消息（用户名信息）
        let form = document.getElementById('form');
        let inputMain = document.querySelector('input[name="main"]');
        form.addEventListener('submit', function(e) {
            e.preventDefault();//取消默认提交事件
            if (inputMain.value) {//如果文本框中有消息
                socket.emit('chat message', inputMain.value);//向服务器发送消息（聊天信息）
                inputMain.value = '';
            }

        });
        //渲染服务器端发送的用户名信息（不仅是自己的，还有别的用户的）
        socket.on('name message',function (msg){
            var item = document.createElement('li');
            item.classList.add("name")
            item.textContent = msg;
            messages.appendChild(item);
        })
        //渲染服务器端发送的聊天信息（不仅是自己的，还有别的用户的）
        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');
});

实现方法

  • 需要先下载三方模块，实现双方同行主要依赖于这个模块npm i socket.io
  • 对于客户端分为发送信息和接收信息
  • 发送请求，当监听到提交事件后，拿到文本框内容，通过socket.emit()向服务端发送信息，这里参数为事件名，传输内容，这里还有一个可选的回调函数
  • 接受信息，socket.on()监听服务端发送过来的信息，这里参数为事件名，回调函数，服务端信息保存在回调函数里，通过创建一个li然后将服务端发的信息赋给li，再渲染到页面
  • 对于服务端当用户上线或者下线时向所有用户发送提示信息和实时接受信息并发送给所有用户
  • 引入socket.io模块后，需要将模块中的Srever结构出来，然后将原生http请求服务注册在socket的服务中
  • 当客户端默认请求时，将index.html也就是聊天界面发送个客户端
  • 客户端通过io.on(‘connection’,socket=>{})对服务端信息进行处理
  • socket.on(‘name message’, msg=>{}）第一次上线发送
  • socket.on(“disconnect”,reason=>{}）断开连接发送
  • socket.on(‘chat message’,msg=>{})实时处理客户端发送的信息

到此这篇关于Node.js用Socket.IO做聊天软件的实现示例的文章就介绍到这了,更多相关Node.js Socket.IO聊天内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Node.js websocket使用socket.io库实现实时聊天室

    Node.js websocket使用socket.io库实现实时聊天室

    认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

  • node.js + socket.io 实现点对点随机匹配聊天

    真心佩服那些可以经常发布笔记的人,其实我也想经常发来的,奈何技术不够加上懒,要向大神们多多学习了,前段时间有用bomb平台自带的socket写一个聊天室,其实基本就是改了改它的demo,这次想实现一个随机私聊,所以自己基于node 和 socket.io 来搭服务,当然,第一次用node做东西玩,虽然做的不好,但是也蛮分享下哈. 先说说用到的东西, node 用来做后台服务,express 用来托管静态资源,然后socket.io 用来传送聊天数据.接下来说说思路,其实用socket.io来传数

  • Node.js用Socket.IO做聊天软件的实现示例

    Node.js用Socket.IO做聊天软件的实现示例

    目录 效果 index.html文件 index.js 实现方法 效果 index.html文件 该页面主要是渲染聊天界面 <!DOCTYPE html> <html> <head> <title>Socket.IO chat</title> <style> body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, &

  • 使用Node.js和Socket.IO扩展Django的实时处理功能

    今天,我们的目标是使用Django,Redis,和Socket.IO建立一个实时的聊天室.虽然几乎所有的Web应用程序都可以建立一个聊天室的.这篇文章将以较高的水平告诉你如何将基于REST的应用程序转换成一个实时的Web应用程序的.我会使用Django创建REST的部分,实际上自由地使用任何你舒服的语言/框架均可.接下来,让我们跳进代码,先列举我们所需要的部分. 组成: Django 1.4+ Redis 2.6.x (版本可选,但是建议使用) Redis-py 2.7.x (仅当你使用Redi

  • node.js基于socket.io快速实现一个实时通讯应用

    node.js基于socket.io快速实现一个实时通讯应用

    随着web技术的发展,使用场景和需求也越来越复杂,客户端不再满足于简单的请求得到状态的需求.实时通讯越来越多应用于各个领域. HTTP是最常用的客户端与服务端的通信技术,但是HTTP通信只能由客户端发起,无法及时获取服务端的数据改变.只能依靠定期轮询来获取最新的状态.时效性无法保证,同时更多的请求也会增加服务器的负担. WebSocket技术应运而生. WebSocket概念 不同于HTTP半双工协议,WebSocket是基于TCP 连接的全双工协议,支持客户端服务端双向通信. WebSocke

  • Vue与Node.js通过socket.io通信的示例代码

    一.Node中socket.io基础 1.是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮询 JSONP轮询 Forever Iframe 在通信时,客户端与服务器端可以使用相同的API 2.怎么用 原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require('http') var s

  • iOS + node.js使用Socket.IO框架进行实时通信示例

    iOS + node.js使用Socket.IO框架进行实时通信示例

    Socket.IO是一个基于WebSocket的实时通信库,在主流平台都有很好的支持,此文主要是通过一个小例子来演示Socket.IO的使用. 基础环境搭建 新建一个文件夹(JS工程),创建一个package.json,复制以下内容并保存. { "name": "socket-chat-example", "version": "0.0.1", "description": "my first s

  • node.js利用socket.io实现多人在线匹配联机五子棋

    项目地址,已上传github --> client端使用简单的h5+js实现了棋局的总体布局. server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成. 五子棋ui界面请见.. client端的界面这里就不做过多解释了,只要稍微懂点h5就可以自行去这里 下载源代码观看,因为今天的主题主要是socket.io这一块,所以本章只概述client和server是如何通过tcp连接进行交互的. 首先先带大家看一下目录结构 | server.j

  • node.js中Socket.IO的进阶使用技巧

    在上一篇博文Socket.IO中,我简要介绍了Socket.IO的基本使用方法并创建了一个简单的聊天室DEMO.本篇在入门篇的基础上,继续探讨Socket.IO的进阶用法.本篇将从配置.房间.事件等方面入手,介绍一些Socket.IO中实用的API和注意事项. 1. 配置 Socket.IO提供了4个配置的API:io.configure, io.set, io.enable, io.disable.其中io.set对单项进行设置,io.enable和io.disable用于单项设置布尔型的配置

  • 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

    使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

    一,利用Node搭建静态服务器 这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,

  • node.js 用socket实现聊天的示例代码

    本文介绍了node.js 用socket实现聊天的示例代码,分享给大家,也给自己留个笔记,具体如下: 服务器搭建 app.js const http = require("http"); const express = require("./express"); //创建一个服务 const server = http.createServer(express); //监听服务端口 server.listen(8001,()=>{ console.log(&q

  • Node.js+express+socket实现在线实时多人聊天室

    Node.js+express+socket实现在线实时多人聊天室

    本文实例为大家分享了Node.js+express+socket实现在线实时多人聊天室的具体代码,供大家参考,具体内容如下 文件结构如下: 前端部分: 登录页面Login部分: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

随机推荐