webSocket实例小Doem

最新推荐文章于 2024-10-10 10:50:43 发布

Dream_whs

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量494

点赞数 4

分类专栏： demo 文章标签： node.js javascript

本文链接：https://blog.csdn.net/Dream_whs/article/details/68068567

版权

demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里我用的是node.js来创建服务
这里用node创建服务的话，就需要下载两个模块：
1.express 用来创建http服务
2.express-static 用来设置根目录

const express=require('express');
const static=require('express-static');

let server=express();
/*创建一个http来接收express创建的http，因为express不能直接被 io 接管*/
let http=require('http').Server(server);
let io=require('socket.io')(http);   /*用socket来接管http */
/*  这里同样要把之前是server换成http（因为服务已经变成http了） */
http.listen(8081);    
server.use(static('根目录名字/'));
let aSocket=[];
/*    接收连接   */
io.on('connection',(socket)=>{
    aSocket.push(socket);          /*  装进数组  */
    console.log(socket);
    /*    接收前台发来的数据  */
    socket.on('send_message',function(name,content){
        for(var i=0; i<aSocket.length; i++){
            if(aSocket[i]==socket){
                /*   查看数据，如果有重复就不发送（跳过此次）  */
                continue;
            }
            /*  把数据发送给前台  */
            aSocket[i].emit('response_message',name,content);
        }
    });
});

这里是HTML和js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天窗口</title>
    <style>
        ul{
            width:360px;
            height:500px;
            border:1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="http://localhost:8081/socket.io/socket.io.js"></script>
    <script>
        /* 这里是访问地址  */
        var ws=io.connect('http://localhost:8081');   
        window.onload=function(){
            var oName=document.getElementById('username');
            var oContent=document.getElementById('content');
            var oSend=document.getElementById('send');
            var oUl=document.getElementsByTagName('ul')[0];
            oSend.onclick=function(){
                if(oName.value=='' || oContent.value==''){
                    alert('不能为空');
                    return;
                }
                /*   发送数据给后台  */
																								                       ws.emit('send_message',oName.value,oContent.value);
                var oLi=document.createElement('li');
                oLi.innerHTML='<h3>'+oName.value+'</h3><p>'+oContent.value+'</p>';
                oUl.appendChild(oLi);
                oContent.value='';
            };
            /*    接收后台发来的数据   */
            ws.on('response_message',function(name,content){
                var oLi=document.createElement('li');
                oLi.innerHTML='<h3>'+name+'</h3><p>'+content+'</p>';
                oUl.appendChild(oLi);
                oContent.value='';
            })
        }
    </script>
</head>
<body>
    <div>
        <label for="username">昵称：</label>
        <input type="text" id="username" >
        <br>
        <label for="content">内容：</label>
        <textarea id="content" cols="30" rows="10"></textarea>
        <input type="button" value="发送" id="send">
    </div>
    <ul>
        <!--<li>
            <h3>小明</h3>
            <p>呵呵！</p>
        </li>-->
    </ul>
</body>
</html>