zoukankan      html  css  js  c++  java
  • 基本通信 (2018/11/17)

    聊天 socket.io  全双工(发送的同时能接收消息  接收的同时能发送消息)
     
    新建一个文件夹 在cmd中安装express环境  cnpm i express --save
                             在cmd中安装socket.io的包  cnpm  i  socket.io  --save
    在node modules的文件夹里找到 socket.client 的文件夹————>readme 读说明书
     
    socket.emit      // 自己能看到,别人看不到
    socket.broadcast.emit             //自己以外的人能看到,自己看不到   (退出)
    io.emit       //群发
     
    ser.js
     
    var express = require('express');   //引入express
    var app = express();     //实例化 存入到app变量中
    app.use(express.static("public"));    //使用静态服务
    var server =  require('http').createServer(app);  //创建一个服务器,并且请求和响应是app处理
    var io = require('socket.io')(server);  //引入socket.io.并且实例化,传入server
    io.on('connection', function(socket){   //回调一个客户端的socket
        console.log("连接成功")  //连接服务器
        socket.on("msg",function(data){   //事件监听
           if(!socket.username){
               socket.username=data;
               io.emit("sys","欢迎"+data+"进入聊天室");   //socket.emit只有本人能看到,别人看不到       io.emit 群发
           }
           else{
               io.emit("sys",socket.username+"说:"+data);  //io.emit  群发
           }
        
        })
        socket.on("disconnect",()=>{//退出
            socket.broadcast.emit("sys",socket.username+"退出了。。。。");  //除了自己以外的人都能收到消息
        })
    });
    server.listen(3000);
     
    a.html
     
        <script  src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <input type="text" id="username" >
        <div id="info"></div>
        <script>
            var username =  document.getElementById("username");
            var socket =  io('http://localhost:3000'); //客户端和服务端连接
            username.onkeyup=function(e){
               if(e.keyCode===13){
                   socket.emit("msg",this.value);   //发送消息
               }
            }
            
            socket.on("sys",function(data){    //监听服务端发出的消息 将服务端发送的消息填入页面
               info.innerHTML=data+"<br  />"+info.innerHTML;
            })
        </script>
  • 相关阅读:
    关于分布式系统中雷同集群技术及原理,你知道多少?
    如何在PHP中进行会话处理?
    PHP的isset()、is_null、empty()使用总结
    Mycatweb的介绍与搭建
    企业如何部署开源邮箱系统?
    企业如何选择合适的邮箱系统?
    Ansible原理与安装部署
    gRPC的简介与实例详解
    高效的性能测试工具-wrk
    轻松玩转windows之wamp开发环境部署
  • 原文地址:https://www.cnblogs.com/zsrTaki/p/11510491.html
Copyright © 2011-2022 走看看