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="js/lib/socket.io.js"></script>
<script src="js/index.js"></script>
效果
这做完这些以后,我们的通信就成功了
完善
首先我们先做一下客户端向服务端发送请求
我们需要在客户端写一个触发事件,当事件触发,服务端就会接收到这个事件
效果
在这之前我们需要引入jquery.js
HTML页面
<script src="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链接地址
朋友们看都看完了,也不再这一点上面,不要吝啬自己的点击,帮忙点赞和收藏谢谢!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。