websocket初学的一些心得体会

不定期增加..~

定义：websoket是一种网络协议，允许服务端和客户端进行全双工的进行网络通讯，也就是说服务器可以给客户端发消息，客户端也可以给服务器发消息。只需要建立一次连接就好，性能更高。

传统方法实现实时（严格来说没法实时）通讯：使用Ajax轮询，也就是说客户端发消息给服务器之后，就会断开连接。而消息的接收方（另一个客户端）每隔1秒（举例）就会询问一次是否有人给自己发了消息，如果服务器有它的消息就会把这个消息返回过去。

Websocket的基本使用

在html5中，已经提供了websocket的api，可以直接使用

官方连接地址已经没有了，需要自己写接口连接

给一个对象发送消息

（1）后端接口部分

（2）前端请求部分

其中addEventListener部分可以变成socket. onopen，等一系列事件的写法。具体可以 参考websocket-mdn的文档给出的信息

给多个对象发送消息

在server函数内需要定义这个函数，然后需要给所有对象发送消息的地方就可以直接调用函数，自定义函数为：

Socket.io

基本步骤及使用

在nodejs上面的定义

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

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

io.on('connection', (socket) => {
    console.log("有用户连接...");
    io.emit('connection', '有用户连接');

    socket.on('message', (data) => {
        io.emit('message1', data);  // 这里的message1就表示是这个数据返回时的名称，和接收数据用的message事件没有关系
    })
        .on('disconnect', () => {   // connection和disconnect都是设定好的事件
            io.emit('connection', '有用户离开..');
        })
})

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在页面上的定义

打开页面时用nodejs开的端口号打开

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

        const div = document.querySelector('div')
        const btn = document.querySelector('button')
        const ipt = document.querySelector('input')

        btn.addEventListener('click', (e) => {
            e.preventDefault()
            if (ipt.value) {
                  socket.emit('message', ipt.value)
                ipt.value = ''
            }
        })

        socket.on('connection', (msg)=>{
            console.log(msg);
        })

        socket.on('disconnect', (msg)=>{
            console.log(msg);
        })

        socket.on('message1', (msg)=>{
            console.log(msg);
        })
    </script>

在这两端中，socket. emit 统一都为给对方发送消息，socket. on 统一都为接收对方发送的消息，同时第一个参数都为事件的名称，第二个参数都为需要传递给对方的数据