websocket使用

websocket简介

websocket:github参考

实例:vue+websocket在线聊天室

1. 浏览器和服务器之间一种通信技术(ajax只能由浏览器发起请求)
2. 能够实现服务器和浏览器之间双向数据通信

websocket使用方法

Init

初始化生成package.json
npm init

Installing

npm install ws --save

Example

script部分

 <button onclick="connect()">websocket连接</button>
    <script>
        var socket = null
        var nickname = "lyy"
        function connect() {
            //初始化建立连接
            socket = new WebSocket('ws://localhost:3000')
            //监听连接成功事件
            socket.onopen = function () {
                console.log("与服务器连接成功")
                //发送数据到服务器
                socket.send(nickname+":hello")
            }
            //监听服务器发送消息事件
            socket.onmessage = function(ev){
                console.log(ev.data)
            }
        }
    </script>

server部分

var WebSocket = require('ws')
var wss = new WebSocket.Server({port:3000})
//监听客户端连接
wss.on('connection',function(ws){
    //监听客户端发送的消息
    ws.on('message',function(msg){
        console.log(msg)
        //监听到客户端的消息后,返回消息
        ws.send("服务端接收到信息")
    })
})


console.log("websocket服务器开启")

tips

• 客户端向服务器发送数据时,服务器端需要作接收处理,服务器端向客户端发送数据时,客户端需要作接收处理