node socket.io web

時間 2019-11-30

原文原文鏈接

soket.io & web

http://socket.io/get-started/chat/javascript

新建一個文件夾 soketWeb ;
在sokertWeb 文件夾內新建一個 package.json 文件；內容以下：

{
  "name": "socketWebExample",
  "version": "0.0.1",
  "description": "it is my first app",
  "dependencies": {
    "socket.io": "^1.3.5"
  }
}

在控制檯中進到soketWeb 文件夾中安裝依賴

npm install --save express@4.10.2

新建一個index.js 文件；內容以下：

var app=require('express')();
var http=require('http').Server(app);
app.get('/',function (req,res) {
    res.send('<h1>hello world</h1>');
});
http.listen(3000,function(){
    console.log('listening on :3000');
});

在控制檯中啟動服務器；運行命令

node index.js

在瀏覽器中輸入 http://localhost:3000/ 將看到hello world; 表示運行成功；
修改index.js 的代碼，添加以下：

app.get('/',function (req,res) {
    //res.send('<h1>hello world</h1>');
    res.sendFile(__dirname+'/index.html');
});

新建一個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; 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>
  </body>
</html>

在控制檯中進到soketWeb 文件夾中安裝依賴

npm install --save socket.io

再修改index.js 內容以下：

var app=require('express')();
var http=require('http').Server(app);
var io=require('socket.io')(http);
app.get('/',function (req,res) {
    //res.send('<h1>hello world</h1>');
    res.sendFile(__dirname+'/index.html');
});
io.on('connection',function(socket){
    console.log('has a user connected');
    socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});
http.listen(3000,function(){
    console.log('listening on :3000');
});

在index.html 中添加一下的代碼：

<script>
    var socket = io();
  </script>

再一次在瀏覽器中運行 http://localhost:3000/ 如圖；
好連接成功！！！
又一次修改 index.html 向服務器發送消息；

<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
</script>

修改index.js 服務器這邊的接收到信息後處理；

io.on('connection',function(socket){
    socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

OK 到這裏就差很少了；
能夠開始通話了；html

再修改index.js 廣播接收到的信息；

var app=require('express')();
var http=require('http').Server(app);
var io=require('socket.io')(http);
app.get('/',function (req,res) {
    //res.send('<h1>hello world</h1>');
    res.sendFile(__dirname+'/index.html');
});
io.on('connection',function(socket){
    console.log('has a user connected');
        socket.on('disconnect', function(){
        console.log('user disconnected');
      });
socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});
http.listen(3000,function(){
    console.log('listening on :3000');
});

在index.html 中修改當接收到信息時，添加到聊天記錄裏面顯示處理；

<script>
  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));
  });
</script>

相關標籤/搜索

socket.io+node

node+socket.io

node+express+socket.io+mysql

node+express+mongodb+socket.io

react+node+mysql+socket.io

node+express+socket.io

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。