websocket快速入门

7dxwy| 阅读:780 发表时间:2018-04-10 09:36:36 前端技术

1.http与websocket的区别

http:只能由客户端向服务器发起通信,只能使用"轮询":每隔一定时间,由客户端发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。效率低,非常浪费资源

websocket:服务器和客户端都可以主动发送信息(双向平等对话)。

bg2017051502

(1)建立在 TCP 协议之上,服务器端的实现比较容易。

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

(3)数据格式比较轻量,性能开销小,通信高效。

(4)可以发送文本,也可以发送二进制数据。

(5)没有同源限制,客户端可以与任意服务器通信。

(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

g2017051503


2.websocket客户端代码:

var ws=new WebSocket("ws://127.0.0.1/ws/");
ws.onopen=function(evt){//ws.addEventListener('open', function (event) {
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
}
ws.onmessage=function(evt){//ws.addEventListener('message', function (event) {
  console.log( "Received Message: " + evt.data);
  ws.close();
}
ws.close=function(evt){//ws.addEventListener('close', function (event) {
  console.log("Connection closed.");
}


3.API:

1) WebSocket构造函数:WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例。 var ws = new WebSocket('ws://localhost:8080');执行上面语句之后,客户端就会与服务器进行连接。

2)webSocket.readyState:实例对象当前状态。

CONNECTING:值为0,表示正在连接。

OPEN:值为1,表示连接成功,可以通信了。

CLOSING:值为2,表示连接正在关闭。

CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

实例:

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

3) 方法:close()、send()

4)属性:

onclose

onerror

onmessage

onopen


4.服务端应用

要使用WebSocket,关键在于服务器端支持,这样,我们才有可能用支持WebSocket的浏览器使用WebSocket。

ws模块

在Node.js中,使用最广泛的WebSocket模块是ws,我们创建一个hello-ws的VS Code工程,然后安装ws:

npm install ws --save-dev

安装好ws之后就可以使用了:

// 导入WebSocket模块:
const Ws = require('ws');

// 引用Server类:
const WsServer = Ws.Server;

// 实例化:
const wss = new WsServer({
    port: 3000
});

接下来,响应connection事件:

wss.on('connection', function (ws) {
    console.log(`[SERVER] connection()`);
    ws.on('message', function (message) {
        console.log(`[SERVER] Received: ${message}`);
        ws.send(`ECHO: ${message}`, (err) => {
            if (err) {
                console.log(`[SERVER] error: ${err}`);
            }
        });
    })
});

在connection事件中,回调函数会传入一个WebSocket的实例,表示这个WebSocket连接。对于每个WebSocket连接,我们都要对它绑定某些事件方法来处理不同的事件。这里,我们通过响应message事件,在收到消息后再返回一个ECHO: xxx的消息给客户端。

完整示例:

服务端:

const express = require('express');
const http = require('http');
const url = require('url');
const WebSocket = require('ws');
const app = express();
app.use(function (req, res) {
    res.send({ msg: "hello" });
});
const server = http.createServer(app);
const wss = new WebSocket.Server({ server,path:"/ws" });
wss.on('connection', function connection(ws, req) {
  const location = url.parse(req.url, true);
  // You might use location.query.access_token to authenticate or share sessions
  // or req.headers.cookie (see http://stackoverflow.com/a/16395220/151312)
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send(message);
  });
  ws.send('something');
});
server.listen(8765, function listening() {
  console.log('Listening on %d', server.address().port);
});

客户端:

var ws=new WebSocket("ws://127.0.0.1:8765/ws/");
ws.onopen=function(evt){//ws.addEventListener('open', function (event) {
console.log("Connection open ..."); 
ws.send("Hello WebSockets!");
}
ws.onmessage=function(evt){//ws.addEventListener('message', function (event) {
  console.log( "Received Message: " + evt.data);
  ws.close();
}
ws.close=function(evt){//ws.addEventListener('close', function (event) {
  console.log("Connection closed.");
}

参考文章:

http://www.ruanyifeng.com/blog/2017/05/websocket.html

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


本文由7dxwy.com发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。

湘公网安备 43012402000343号