[My own finishing] socket.io official demo | Create a simple chat application

socket.io official demo | Create a simple chat application

I saw a very simple demo application on the socket.io official website, and I followed it and kept it as a souvenir.

order

First, make sure that Node.js has been installed before the official work,
and then install express and
its First, create a folder named chat in the server,
select this chat folder, and create a package.json with the content of

{
  "name": "socket聊天示例",
  "version": "0.0.1",
  "description": "我的第一个socket.io应用",
  "dependencies": {}
}

For the sake of convenience, npm install --saveinstall express and its dependent projects with version 4.15.2:
npm install --save [email protected]
then we create a new js file 'index.js', edit it, the content of the index.js file is:

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('监听端口: xxx.xxx.xxx.xxx:3000');
});

Save the file, node index.jsrun it with and enter the ip/domain name + port in the browser to see that the page outputs a hello world.
Of course, the direct output method is not convenient, so the following will use the routing method to display a simple chat page and modify
the index.js

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

In this way, the application becomes sending a file, __dirname represents the absolute path, and index.html is placed in the same folder as index.js.
After that we create 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>发送</button>
    </form>
  </body>
</html>

After restarting index.js and entering the ip and port number, a prototype chat page can be displayed:
write picture description here
the display is successful, but this page does not have the function of sending and sharing messages. To add such functionality, we first install socket.io

npm install --save socket.io

After the installation is complete, there will be an additional node_modules folder in the folder.
Then make some modifications to index.js:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

io.on('connection', function(socket){
  console.log('一个用户建立了连接');
});

http.listen(8899, function(){
  console.log('监听端口：xxx.xxx.xxx.xxx:8899');
});

Modify the index.html file and </body>add it before:

<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io();
</script>

Restart index.js to connect again, and you can see the information of user access on the server side.
write picture description here
So far , it is only realized that when the user accesses the web page, the server can be notified that the user has established a connection, but the message sending and forwarding has not been realized. We need to modify index.js again

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

io.on('connection',function(socket){
    console.log('一个用户建立了连接');
    socket.on('disconnect',function(){
        console.log('用户断开连接');  
    });
    //服务器端接收的chat message事件
    socket.on('chat message',function(msg){
        console.log('message:'+msg);
        io.emit('chat message',msg);
    });
});

http.listen(8899,function(){
    console.log('监听端口：xxx.xxx.xxx.xxx:8899');
});

At the same time, the client page also needs to make some changes: make some changes to the script of the html page, and use jquery here:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>

    $(function(){
        var socket = io();
        $('form').submit(function(){
            socket.emit('chat message',$('#m').val());
            $('#m').val('');
            return false;
        });
        //客户端发送的chat message 事件
        socket.on('chat message',function(msg){
            $('#messages').append($('<li>').text(msg));
            window.scrollTo(0,document.body.scrollHeight);
        });
    });
</script>

After restarting node.js and visiting the page, the message can be sent. Two pages, the message sent by one page and the other page will also be received, server-side effect:
write picture description here
client-side effect:

Since then, the simplest chat demo of socket.io has been built.