使用nodejs搭建聊天室

搭建一个服务器


//引入fs
var fs = require('fs')
//引入http
var http = require('http')
var date = new Date()
/*** @FormDate 格式化时间* @param {*} date 当前时间*/
function FormDate(date) {return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
/*** 搭建一个服务器*/
var server = http.createServer(function (res, res) {if (res.url !== '/favicon.ico') {res.writeHead(200, { "Content-type": "text/html" })const myreadstream = fs.createReadStream(__dirname + '/static/index.html', 'utf-8')myreadstream.pipe(res)}
})
//引入socket.io 这里是两步，第一步是io = require('socket.io') 第二步是一个新的变量.server 合成一步就是下面的代码
var io = require('socket.io')(server);
io.on("connection", function (socket) {//这里获取到对方的ip地址，可以展示，也可以不展示，也可以进行ip的过滤var clientIp = socket.request.connection.remoteAddressconsole.info("一个socket连接成功了")socket.on("link_to_server", function (msg, nick) {//这里使用io发送 io.emit('link_to_client', `${nick} : ${msg} ${FormDate(date)}`)})
})
server.listen(10010, '0.0.0.0');
console.info("server is running...")

下载socket.io 插件

新建一个static文件夹并创建一个index.html文件


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="/socket.io/socket.io.js"></script>
</head>
<body><p>聊天室</p><div id="infos"></div><input style="margin-top: 5vh;width: 100px;height: 40px;border: 1px solid #ffffff;border-radius: 4px;color: #000000;padding-left: 10px" type="text" id="nick" value="" placeholder="昵称" /><input type="text" id="send_info" value="" placeholder="请输入您想说的话" /><button type="button" id="btn">发送</button>
</body>
<script>//创建一个io对象var socket = io();//用户点击发送的时候直接将昵称和信息内容发送过去，如果没有昵称，显示匿名，判断是不是有值document.getElementById("btn").onclick = function () {if(document.getElementById("send_info").value){socket.emit("link_to_server", document.getElementById("send_info").value, document.getElementById("nick").value ? document.getElementById("nick").value : '匿名')}else{alert(`发送内容不可以为空`)}}// 收到的信息展示出来，新建一个元素，append到div中socket.on('link_to_client', function (msg) {var h6 = document.createElement('h6');h6.innerText = `${msg}`;document.getElementById('infos').append(h6)})
</script>
<style>body {background: darkslateblue;text-align: center;color: aliceblue;margin: 0% 10%}p {font-size: 2rem}input {margin-top: 5vh;width: 200px;height: 40px;border: 1px solid #ffffff;border-radius: 4px;color: #000000;padding-left: 10px;}button {border: none;background: #ffffff;border-radius: 4px;width: 90px;height: 42px;color: #000000;}#infos {margin-left: 25vw;width: 400px;height: 500px;overflow: scroll;border: none;background: #ffffff;color: #000000;}
</style>
</html>

启动服务器

使用浏览器打开http://localhost:10010/index/html

使用nodejs搭建聊天室相关推荐

原生JavaScript+WebSocket+nodejs实现聊天室功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. WebSocket也是前端非常重要的技术栈. 现在各种网站.App.小程序都伴有即时通信的功能.WebSoc ...
【教程】腾讯云轻量应用服务器搭建聊天室
前言前些日子听朋友说,他们领的腾讯云轻量246还在吃灰,我在萌备聊天室里看见了这个系统感觉挺不错那这篇文章就教大家用宝塔来搭建一个聊天室介绍 Fiora系统非常简洁,而且也有很多功能,基于 n ...
vue+websocket+nodejs实现聊天室 - 消息已读未读
前言上一篇讲了聊天室增加一对一单聊,这次讲如何新增已读未读状态. 大概思路: 服务器返回消息列表,增加参数status为1,单聊和群聊通过过滤状态区分对应未读数量,当前聊天,直接在currentMe ...
MySQL和php搭建聊天室,用PHP MySQL搭建聊天室
MySQL并发能力强.响应速度快,是性能优异的数据库软件:PHP是功能强大的服务器端脚本语言.笔者在山西铝厂网站开发中,采用PHP4.0 MySQL3.23.38建立了多种应用.下面,以一个简单的聊天 ...
socket.io搭建聊天室
文章目录 1.定义 2.特点 3.实例 1.定义 socket.io是一个可以在客户端和服务器之间实现低延迟, 双向和基于事件的通信的库.它建立在websocket之上,且当浏览器不支持web ...
php即时聊天数据库设计入门经典教程_用PHP+MySQL搭建聊天室
MySQL并发能力强.响应速度快,是性能优异的数据库软件:PHP是功能强大的服务器端脚本语言.笔者在山西铝厂网站开发中,采用 PHP4.0+MySQL3.23.38建立了多种应用.下面,以一个简单的聊 ...
php3.2搭建临时聊天系统,基于swoole搭建聊天室程序
1. 创建websocket服务器 swoole从1.7.9版本开始, 内置了websocket服务器功能,我们只需几行简单的PHP代码,就可以创建出一个异步非阻塞多进程的WebSocket服务器. ...
一文了解使用swoole如何搭建聊天室程序
1.创建websocket服务器 swoole从1.7.9版本开始, 内置了websocket服务器功能,我们只需几行简单的PHP代码,就可以创建出一个异步非阻塞多进程的WebSocket服务器. 首 ...
教你用Vue渐进式搭建聊天室，从JavaScript=TypeScript
前言 Vue+Socket.io这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现(大家可以在github中的Releases查看): 纯前端(Vuex) 后端+前端(JavaScr ...

使用nodejs搭建聊天室

搭建一个服务器

新建一个static文件夹并创建一个index.html文件

使用nodejs搭建聊天室相关推荐

最新文章

热门文章