WebSocket 前端demo node.js 加vue

websocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议

websoket使得客户端和服务端的数据交换变的更加的简单。允许服务端主动向客户端推送数据，在websoket api中，浏览器和服务器值需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据相互传送。

websoket能更好的节省服务器资源和宽带，并且能够更实时地进行通讯。

浏览器通过该Js向服务器发出建立websocket连接的请求，连接建立以后，客户端和服务端就可以挺高tcp连接直接交换数据，当你获取webscoket连接以后，可以通过send方法向服务器发生数据。

node.js搭建简单的服务端

首先我们要装node.js webscoket的包

npm i nodejs-websocket -S

服务端代码 app.js

var ws=require("nodejs-websocket")

const PORT=5001
let myotherdata={
    id:1,
    name:'hhh',
    test:'我是哈哈'
}
var serve=ws.createServer((conn)=>{
    console.log('连接成功')
    conn.send('恭喜你 你已经成功和我建立连接了')
    mywebsocket(conn)
    conn.on("error",()=>{
        console.log('error')
    })
    conn.on('close',()=>{
        console.log('连接关闭')
    })
    conn.on('text',(data)=>{
        console.log('收到了来自客户端的数据',data)
        conn.send(`我是服务端给你说的东西啦,${data},${myotherdata.name}`)
    })
})
var mywebsocket=function (e){
    let i=1;
    setInterval(()=>{
        e.send(`是服务端第${i}次给你发送消息`)
        i++
    },6000)

}

serve.listen(PORT,()=>{
    console.log('服务器启动成功，监听了端口'+PORT)
})

可以先把服务端代码跑起来

node app.js

客户端代码 这个地址和端口可以和本地对上

        let mysocket
        mysocket = new WebSocket("ws://127.0.0.1:5001");
        mysocket.addEventListener("open", () => {
            console.log('连接成功')
        })
        mysocket.addEventListener('message', (e) => {
            console.log(e.data)
        })

然后就能大概的跑一跑了

tips：部署到服务器上以后 要是报错啊 试试把服务器的防火墙关掉。。 虽然很不负责任 但事关掉我部署就能跑了 。。。