socket.io學習記錄

AlexZ33發表於2019-02-16

基礎看這裡 WebSocket 教程

https://socket.io/docs/
https://segmentfault.com/a/11…
用Socket.io打造協作應用

Installing

$ npm install socket.io

Using with Node http server

Server (app.js)

var app = require(`http`).createServer(handler)
var io = require(`socket.io`)(app);
var fs = require(`fs`);

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + `/index.html`,
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end(`Error loading index.html`);
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on(`connection`, function (socket) {
  socket.emit(`news`, { hello: `world` });
  socket.on(`my other event`, function (data) {
    console.log(data);
  });
});

Client (index.html)

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io(`http://localhost`);
  socket.on(`news`, function (data) {
    console.log(data);
    socket.emit(`my other event`, { my: `data` });
  });
</script>

開始練習

例項1 https://segmentfault.com/a/1190000004925844

<!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; }
      #messages { margin-bottom: 40px }
    </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="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function () {
        var socket = io();
        $(`form`).submit(function(){
          socket.emit(`chat message`, $(`#m`).val());
          $(`#m`).val(``);
          return false;
        });
        socket.on(`chat message`, function(msg){
          $(`#messages`).append($(`<li>`).text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
      });
    </script>
  </body>
</html>
var app = require(`express`)();
var http = require(`http`).Server(app);
var io = require(`socket.io`)(http);
var port = process.env.PORT || 3000;

app.get(`/`, function(req, res){
  res.sendFile(__dirname + `/index.html`);
});

io.on(`connection`, function(socket){
  socket.on(`chat message`, function(msg){
    io.emit(`chat message`, msg);
  });
});

http.listen(port, function(){
  console.log(`listening on *:` + port);
});

Getting this example

You can find it on GitHub here.

$ git clone https://github.com/socketio/chat-example.git

相關文章