zoukankan      html  css  js  c++  java
  • 利用socket.io构建一个聊天室

    利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊。

    socket.io

    这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了。其实主要用的东西就是事件监听和触发,on和emit。当socket.io连接成功之后,后台就可以跟浏览器互相通信了。

    let io = socket(app);
    io.on('connection', socket => {
        socket.on('reseive', data => {
    	    io.emit('news', data)
        })
     });
    

    关于后端

    首先构建一个服务器,然后请求时将聊天页面文件返回

    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);
    

    这里没什么可说的,别写错路径就行。

    index.html

    聊天界面只需要将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
    

    每次发送到页面消息总是添加到聊天界面的最后。

    其他

    我们启动服务器之后,都知道退出直接按ctrl+c,但是总会有不小心嘛。我们肯定遇到过有按两次ctrl+c退出和按一次控制台问你是否退出,按y/n。这里也做一个简单的实现(前提:在node中使用process.exit()来退出)。

    按两次ctrl+c退出

    首先是监听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
    ');
    	    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
    ');
    
    })
    
    process.stdin.on('data', (data) => {
    
        if(!data){
    
        }else if(data.toString().trim().toLowerCase() === 'y'     && isExit){
    	    process.exit();
        }else{
    	    process.stdout.write('
    ');
        }
    })
    

    注意点就是监控输入的时候,回调函数中的data不是string,要转一下,data.toString().trim()。
    详细代码地址https://github.com/Stevenzwzhai/socket.io_chatRoom

  • 相关阅读:
    Vue的使用
    Bootstrap 提示工具(Tooltip)插件
    基于layerpage 前后端异步分页
    bootstrap的selectpicker的方法
    移动端好用的下拉加载上拉刷新插件 dropload插件
    vue的安装
    chromium ②
    chromium ①
    一些技术博客 集合
    提高pv uv
  • 原文地址:https://www.cnblogs.com/Upton/p/6734027.html
Copyright © 2011-2022 走看看