简单的nodejs群聊天通讯

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

nodejs实现局域网聊天通信

介绍

这几天比较轻松,好长时间没有用node做效果了,所有就做了一个群聊天通信的效果,用的是soctetio
效果图

图片描述

搭建web服务器

app.js


//引入核心模块
const http = require("http");
//自己的模块
const express = require("./express");


//创建一个服务
const server = http.createServer(express);

//监听服务端口
server.listen(9999,()=>{
    console.log("服务端已经启动,请访问 http://localhost:9999");
});

express.js

const url = require("url");
const fs = require("fs");
function express(req,res){
    //获取用户响应的信息同时转换URL对象
    var urlObj = url.parse(req.url);
    //读取用户响应路劲
    var filePath = "./user"+urlObj.pathname;
    var content = "路劲不对,正确的是index.html"
    //判断读文件existsSync
    if(fs.existsSync(filePath)){
        content = fs.readFileSync(filePath);
    }
    
    //给服务端发出响应同时将二进制转换成toString
    res.end(content.toString());
    
}
//导出 
module.exports = express;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天系统</title>
</head>
<body>
    <input type="text">
</body>
</html>

这样我们一个简单的web服务器就搭建完毕了

客户端服务搭建与服务端通信

效果

图片描述

首先我们要引入socketio

app.js

var io = require('socket.io')(server);
接下来我们要建立服务端socket请求连接
io.on('connection', function(socket){
    console.log('a user connected');
});
有了建立连接必然有断开连接
//断开连接
socket.on('disconnect', function(){
    console.log('user disconnected');
});
下面我们自己创建一个js文件,我创建了一个index.js,用来写客户端建立连接的代码
//客户端建立连接 
var socket = io();
在通讯的时候我们必须要在HTML里面引入下面2个js文件,一个是自己创建的,一个是socketio的
<script src="https://segmentfault.com/a/1190000011561196/js/lib/socket.io.js"></script>
<script src="https://segmentfault.com/a/1190000011561196/js/index.js"></script>
效果

图片描述

这做完这些以后,我们的通信就成功了

完善

首先我们先做一下客户端向服务端发送请求

我们需要在客户端写一个触发事件,当事件触发,服务端就会接收到这个事件
效果

图片描述

在这之前我们需要引入jquery.js

HTML页面

<script src="https://segmentfault.com/a/1190000011561196/js/lib/jquery.min.js"></script>

index.js

$('form').submit(function(){
    //触发事件
    socket.emit('chat message', $('#m').val());
    //情况文本中的内容
    $('#m').val('');
    //阻止事件默认行为
    return false;
});
服务端接收事件

app.js

//接收客户端的信息
socket.on('chat message', function(msg){
    console.log('message: ' + msg);
});

接下来服务端接收到客户端发来的请求后在返回到客户端

效果

图片描述

首先我们需要将服务端的数据广播到客户端去
app.js
//将服务端的消息广播到客户端
socket.broadcast.emit("guangbo",msg);
接下来我们客户端需要接收服务端广播出来的数据
index.js
//接收服务端发来的消息
socket.on('guangbo', function(msg){
    $('#messages').append($('<li>').text(msg));
});
这样我们的一个简单的群聊天功能就实现了,想要加好看的效果可以自己家

完整代码

想要完整代码的朋友可以去我的GitHub上面去看

GitHub链接地址

朋友们看都看完了,也不再这一点上面,不要吝啬自己的点击,帮忙点赞和收藏谢谢!
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看