node系列：初探websocket

简介

很多网站的实时推送技术，所用的技术大多都是 Ajax 轮询。也就是隔几秒请求一次接口，显然这样会浪费很多的带宽等资源。WebSocket 允许服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

客户端实现

function WebSocketTest () {
  if ("WebSocket" in window) {
    console.log("您的浏览器支持 WebSocket!");

    // 打开一个 web socket
    var ws = new WebSocket("ws://localhost:9998/echo");

    ws.onopen = function () {
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send("发送数据");
      alert("数据发送中...");
    };

    ws.onmessage = function (evt) {
      var received_msg = evt.data;
      alert("数据已接收...");
    };

    ws.onclose = function () {
      // 关闭 websocket
      alert("连接已关闭...");
    };
  }

  else {
    // 浏览器不支持 WebSocket
    alert("您的浏览器不支持 WebSocket!");
  }
}

后台实现（node）

由于原生的node实现起来非常复杂，需要牵扯到一些底层的如数据帧的编码解码，所以我们这里直接用已经实现好的第三方库，比如socket.io，WebSocket-Node

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
  res.send('<h1>Welcome Realtime Server</h1>');
});
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on("disconnect", function () {
    console.log("a user go out");
  });
  socket.on("message", function (obj) {
    io.emit("message", obj);
  });
});
http.listen(3000, function () {
  console.log('listening on *:3000');
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
</head>
<body>
  <ul id="message"></ul>
  <script>
    socket = io.connect('ws://127.0.0.1:3000');
    socket.emit("message", {"name" : navigator.userAgent, "msg" : "hello world"});
    socket.on("message", function(obj) {
      console.log(obj);
    });
  </script>
</body>
</html>

简易的控制台版的聊天室

来源：https://blog.csdn.net/weixin_43972437/article/details/100544496

标签

websocket

软件

node