利用socket.io来构建一个聊天室,输入本身的id和消息,全部的访问用户均可以看到,相似于群聊。html
这里只用来作一个简单的聊天室,官网也有例子,很容易就作出来了。其实主要用的东西就是事件监听和触发,on和emit。当socket.io链接成功以后,后台就能够跟浏览器互相通讯了。node
let io = socket(app); io.on('connection', socket => { socket.on('reseive', data => { io.emit('news', data) }) });
首先构建一个服务器,而后请求时将聊天页面文件返回git
const app = http.createServer((req, res) => { fs.readFile(__dirname+'/index.html', (err, data) => { if(err){ res.writeHead(500); return res.end('Error loading index.html'); } res.writeHead(200); res.end(data); }); }).listen(3003);
这里没什么可说的,别写错路径就行。github
聊天界面只须要将socket.io引入便可后端
<script src="/socket.io/socket.io.js"></script>
切记,这里不是说在index.html目录下创建这个文件,由于你的聊天页面是经过后端返回的,说以这个路径是在后端的路径,换句话说,你只须要这么写就好了。
而后就是聊天页面中监听来自服务端的消息并显示到页面浏览器
socket.on('news', data => { oDiv.insertAdjacentHTML('beforeend', `<p> <span class="title">${data.id}</span> <span class="content">${data.msg}</span> </p>`); });
这里我使用了insertAdjacentHTML,这个可能你们没怎么见过,可是很好用,它能够帮你把内容插入到指定位置,固然不是任意位置,有四个位置服务器
//beforebegin <div> //afterbegin content //beforeend </div> //afterend
每次发送到页面消息老是添加到聊天界面的最后。app
咱们启动服务器以后,都知道退出直接按ctrl+c,可是总会有不当心嘛。咱们确定遇到过有按两次ctrl+c退出和按一次控制台问你是否退出,按y/n。这里也作一个简单的实现(前提:在node中使用process.exit()来退出)。socket
首先是监听ctrl+c事件函数
process.on('SIGINT',callback);
在回调函数中咱们能够作一些控制,使得用户两次ctrl+c以后再退出
let isExit = false; process.on('SIGINT', () => { if(isExit){ isExit = false; process.exit(); }else{ isExit = true; process.stdout.write('Please ^C again to exit this process\n'); let timer = setTimeout(function(){ clearTimeout(timer); isExit = false; },3000); } })
固然咱们为了防止用户按了一次以后好久没按,再次按的时候会退出,三秒以后会重置。
这个跟上面类似,只不过,在按了一次以后提示用户要输入y/n,这里监控用户输入便可。
let isExit = false; let reset = () => { let timer = setTimeout(() => { clearTimeout(timer); isExit = false; }, 5000) } process.on('SIGINT', () => { isExit = true; reset(); process.stdout.write('Are you sure exit this process? Y/N\n'); }) process.stdin.on('data', (data) => { if(!data){ }else if(data.toString().trim().toLowerCase() === 'y' && isExit){ process.exit(); }else{ process.stdout.write('\n'); } })
注意点就是监控输入的时候,回调函数中的data不是string,要转一下,data.toString().trim()。
详细代码地址https://github.com/Stevenzwzhai/socket.io_chatRoom