【socket.io研究】2.小試牛刀

時間 2019-11-09

原文原文鏈接

1.創建個項目，也就是文件夾，這裏使用testsockethtml

2.建立文件package.json，用於描述項目：node

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

3.建立index.jsjquery

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.htmlexpress

<!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; width: 100%; } 
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
      form button { width: 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>