初识WebSocket

最新推荐文章于 2022-09-13 21:23:03 发布

婷酱酱

最新推荐文章于 2022-09-13 21:23:03 发布

阅读量172

点赞数

分类专栏： node webSocket

本文链接：https://blog.csdn.net/weixin_43221240/article/details/103958811

版权

webSocket 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

node

0 篇文章 0 订阅

订阅专栏

前言
众所周知，HTTP协议是一种无状态、无连接、单向的应用层协议，只能由客户端发起请求，服务端响应请求。

这就显示了一个明显的弊端：服务端无法主动向客户端发起消息，一旦客户端需要知道服务端的频繁状态变化，就要由客户端盲目地多次请求以获得最新地状态，这就是长轮询

而长轮询有显著地缺点：效率低、非常耗费资源，就在这个时候WebSocket出现了。

WebSocket是一个长连接，客户端可以给服务端发送消息，服务端也可以给客户端发送消息，这便是全双工通信

初识ws模块

先创建一个服务端程序

const WebSocket = require('ws');//引入模块

const wss = new WebSocket.Server({ port: 8080 });//创建一个WebSocketServer的实例，监听端口8080
wss.on('connection', function connection(ws) {

**//Emitted when a message is received from the server.**

  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send('Hi Client');
  });//当收到消息时，在控制台打印出来，并回复一条信息

});

再创建一个客户端程序

const WebSocket = require('ws');

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

ws.on('open', function open() {
  ws.send('Hi Server');
});//在连接创建完成后发送一条信息

ws.on('message', function incoming(data) {
  console.log(data);
});//当收到消息时，在控制台打印出来

在node环境中先运行服务端程序，再运行客户端程序，我们就可以在控制台分别看到两个端的打印信息了

至此，通过ws模块创建的一个最简单的Websocket连接就完成了！

nodejs基于WS模块实现WebSocket聊天功能的方法

app.js代码

//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require('ws').Server,
  wss = new WebSocketServer({
    port: 3000, //监听接口
    verifyClient: socketVerify,
    clientTracking:true //可选，验证连接函数
  });
function socketVerify(info) {
  // console.log(info.origin);
  // console.log(info);
  // console.log(info.secure);
  // console.log(info.origin);
  // var origin = info.origin.match(/^(:?.+\:\/\/)([^\/]+)/);
  //if (origin.length >= 3 && origin[2] == "blog.luojia.me") {
  //  return true; //如果是来自blog.luojia.me的连接，就接受
  //}
  // console.log("连接",origin[2]);
  return true; //否则拒绝
  //传入的info参数会包括这个连接的很多信息，你可以在此处使用console.log(info)来查看和选择如何验证连接
}
//广播
wss.broadcast = function broadcast(s,ws) {
  // console.log(wss.clients.length);
  // debugger;
  wss.clients.forEach(function each(client) {
    // if (typeof client.user != "undefined") {
      if(s == 1){
        client.send(ws.name + ":" + ws.msg);
      }
      if(s == 0){
        client.send(ws + "退出聊天室");
      }
    // }
  });
};
// 初始化
wss.on('connection', function(ws) {
  // console.log(ws.clients.session);
  // console.log("在线人数", wss.clients.length);
  
  ws.send('你是第' + wss.clients.length + '位');
  // 发送消息
  ws.on('message', function(jsonStr,flags) {
    // console.log('received: %s', jsonStr);

    var obj = eval('(' + jsonStr + ')');
    // console.log(obj);
    this.user = obj;
    if (typeof this.user.msg != "undefined") {
      wss.broadcast(1,obj);
    }
  });
  // 退出聊天
  ws.on('close', function(close) {
    try{
      wss.broadcast(0,this.user.name);
    }catch(e){
      console.log('刷新页面了');
    }
  });
});

index.html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>聊天</title>
  <link rel="stylesheet" href="">
  <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript">
  </script>
</head>
<style type="text/css" media="screen">
div {
  border: 1px solid #cccccc;
  width: 500px;
  min-height: 100px;
}
</style>
<body>
  <div id="show">
  </div>
  <input type="text" id="message" name="" value="" placeholder="">
  <input type="text" id="name" value="" placeholder="昵称;">
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="send()">发送</a>
  <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="exit()">退出</a>
  <!-- <input type="text" id="token" name="" value="" placeholder="" readonly="false"> -->
</body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:3000?t=test");
ws.onopen = function() {
  console.log("连接状态", ws);
  $("#show").html("连接状态;" + ws.readyState + "</br>");
  console.log("open");
  // ws.send("Hi 服务器");
  // ws.open("start");
};
ws.onmessage = function(evt) {
//Emitted when a message is received from the server.
  // console.log(evt.data+'evt.data')
  alert(evt.data);
  $("#show").append(evt.data + "</br>");
};
ws.onclose = function(evt) {
  console.log("WebSocketClosed!");
  console.log(evt);
};
ws.onerror = function(evt) {
  console.log("WebSocketError!");
};
function send() {
  var msg = $("#message").val();
  var key = $("#token").val();
  var name = $("#name").val();
  var str = "{name:'" + name + "',msg:'" + msg + "',key:'" + key + "'}";
  console.log("发送", str);
  ws.send(str);
};
function exit() {
  var r = ws.close();
  console.log("退出", r);
}
</script>

效果图
在这里插入图片描述

婷酱酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识WebSocket

前言众所周知，HTTP协议是一种无状态、无连接、单向的应用层协议，只能由客户端发起请求，服务端响应请求。这就显示了一个明显的弊端：服务端无法主动向客户端发起消息，一旦客户端需要知道服务端的频繁状态变化，就要由客户端盲目地多次请求以获得最新地状态，这就是长轮询而长轮询有显著地缺点：效率低、非常耗费资源，就在这个时候WebSocket出现了。WebSocket是一个长连接，客户端可以给服务端发...
复制链接

扫一扫