WebSocket:实时通讯-方法1

实现websocket的方法有很多,本方法偏原生方式

1.client端

1.1引言

H5中内置了websocket API,可以在浏览器端直接使用;

参考文档:

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

var ws = new WebSocket("ws://localhost:3000");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};   

1.2构造函数

var WebSocket = new WebSocket(url [, protocols]);

url:要连接的URL;这应该是WebSocket服务器将响应的URL。
protocols (可选):一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议,这样单个服务器可以实现多个WebSocket子协议(例如,您可能希望一台服务器能够根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。

//const socket = new WebSocket('ws://localhost:3000');

1.3属性:

webSocket.readyState 返回实例对象的当前状态,共有四种。

Constant                   Value
WebSocket.CONNECTING         0
WebSocket.OPEN               1
WebSocket.CLOSING            2
WebSocket.CLOSED             3

示例:

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

其他属性:

WebSocket.binaryType:使用二进制的数据类型连接;
WebSocket.bufferedAmount(只读):未发送至服务器的字节数;
WebSocket.extensions(只读):服务器选择的扩展;
WebSocket.onclose:用于指定连接关闭后的回调函数;
WebSocket.onerror:用于指定连接失败后的回调函数;
WebSocket.onmessage:用于指定当从服务器接受到信息时的回调函数;
WebSocket.onopen:用于指定连接成功后的回调函数;
WebSocket.protocol(只读):服务器选择的下属协议;
WebSocket.readyState(只读):当前的链接状态;
WebSocket.url(只读):WebSocket 的绝对路径;

1.4方法

WebSocket.close([code[, reason]]):关闭当前链接。
WebSocket.send(data):对要传输的数据进行排队。

1.5事件

使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性,来监听下面的事件。

close:当一个 WebSocket 连接被关闭时触发;也可以通过 onclose 属性来设置。
error:当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时;也可以通过 onclose 属性来设置。
message:当通过 WebSocket 收到数据时触发;也可以通过 onmessage 属性来设置。
open:当一个 WebSocket 连接成功时触发;也可以通过 onopen 属性来设置。

示例:

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

1.6示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ta {
            width: 100vw;
        }
    </style>
</head>

<body>
    <h1>Socket IO Test</h1>
    <div>
        <textarea name="" id="ta" cols="30" rows="10"></textarea>
        <button id="btn_connect">connect</button>
        <button id="btn_send">send</button>
    </div>
    <script>
        const btn1 = document.querySelector('#btn_connect')
        const btn2 = document.querySelector('#btn_send')
        const ta = document.querySelector('#ta')
        let ws = null
        btn1.addEventListener('click', function () {
            ws = new WebSocket('ws://localhost:3000')
            ws.onmessage = function (event) {
                console.log(event.data)
                ta.innerHTML += event.data + '\n'
            }
            ws.onopen = function (data) {
                console.log('open---------', data)
            }
        })
        btn2.addEventListener('click', function () {
            ws.send('hello world')
        })
    </script>
</body>

</html>

2.server端

server端使用express.jsws.js实现

npm install express
npm install ws
const express = require('express')
const http = require('http')
const path = require('path')
const fs = require('fs')

const app = express()


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

const server = http.createServer(app)


server.listen(3000, function () {
    console.log('server is running on port:3000')
})

const WebSocket = require('ws')

const ws = new WebSocket.Server({ server })

ws.on('connection', function (socket) {
    socket.send('connection')
    socket.on('message', function (msg) {
        console.log('收到的消息:' + msg)
        socket.send('收到的消息:' + msg +'\t'+ new Date().getTime())
    })
})
学习更多知识,加QQ群:1098090823
威武网 » WebSocket:实时通讯-方法1

提供最优质的资源集合

立即查看 了解详情