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>
  • 相关阅读:
    IconRes提供免费高质量的Material风格android官方图标库
    android中的所谓观察者模式
    Android总结篇——Intent机制详解及示例总结
    SpringMVC注解@initbinder解决类型转换问题
    ubuntu16.04上安装tomcat7
    ImportError: No module named corsheaders
    linux 网卡
    工控机安装Ubuntu14.04
    python2安装django
    Ubuntu14.04 terminal添加右键
  • 原文地址:https://www.cnblogs.com/zsrTaki/p/11510491.html
Copyright © 2011-2022 走看看