• 【socket.io研究】2.小试牛刀


    1.建立个项目,也就是文件夹,这里使用testsocket

    2.创建文件package.json,用于描述项目:

    { 
        "name":"testsocket", 
        "version":"0.0.1", 
        "description":"my first nodejs app", 
        "dependencies":{ 
            "express":"~4.10.2",, 
            "socket.io":"~1.2.0" 
        } 
    }

     3.创建index.js

    var app = require('express')();
    
    //Express初始化变量app,作为方法应用于http服务 
    var http = require('http').Server(app); 
    var io = require('socket.io')(http);
    
    //定义一个路由方法'/'用作我们访问网站首页的返回结果
    
    app.get('/', function(req, res){ 
        res.sendFile(__dirname + '/index.html'); 
        console.log('new link:', req); 
    });
    
    io.on('connection', function(socket){ 
        socket.on('chat message', function(msg){ 
            io.emit('chat message', msg); 
            console.log('message: ' + msg); 
        }); 
    });
    
    //监听服务器3000端口
    
    http.listen(3000, function(){ 
        console.log('listening on *:3000'); 
    });

     4.创建index.html

    <!doctype html> 
    <html> 
      <head> 
        <title>Socket.IO chat</title> 
        <style> 
          * { margin: 0; padding: 0; box-sizing: border-box; } 
          body { font: 13px Helvetica, Arial; } 
          form { background: #000; padding: 3px; position: fixed; bottom: 0;  100%; } 
          form input { border: 0; padding: 10px;  90%; margin-right: .5%; } 
          form button {  9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
          #messages { list-style-type: none; margin: 0; padding: 0; } 
          #messages li { padding: 5px 10px; } 
          #messages li:nth-child(odd) { background: #eee; } 
        </style> 
      </head> 
      <body> 
        <ul id="messages"></ul> 
        <form action=""> 
          <input id="m" autocomplete="off" /><button>Send</button> 
        </form> 
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
        <script> 
          var myid = Math.floor(Math.random() * 100) + 1; 
          var socket = io('/'); 
          
          $('form').submit(function(){ 
            socket.emit('chat message', myid + ' says: ' + $('#m').val()); 
            $('#m').val(''); 
            return false; 
          }); 
          
          socket.on('chat message', function(msg){ 
            $('#messages').append($('<li>').text(msg)); 
          }); 
          
        </script> 
      </body> 
    </html>

     5.执行

    安装:

    npm install –save express

    npm install –save socket.io

    node index.js

    浏览器中访问127.0.0.1:3000

    6.先实现这些功能再说其他的东西吧

    demo下载地址:http://files.cnblogs.com/files/renyuzhuo/testsocket.zip

  • 相关阅读:
    48、Windows驱动程序模型笔记(六),同步
    44、Windows驱动程序模型笔记(二)
    JavaP:对象创建
    JavaP:继承和多态【只有提纲】
    ASP.NET MVC:一个简单MVC示例
    JavaP: 2、类和对象
    ASP.NET MVC:解析 MVC+ADO.NET Entity(实体类)
    Oracle: 一、Oracle简介,安装,基本使用,建表增删改查,数据类型及常用命令
    JavaP:面向对象编程
    ASP.NET: PagedDataSource
  • 原文地址:https://www.cnblogs.com/renyuzhuo/p/5040189.html
Copyright © 2020-2023  润新知