socket的简单使用

模拟服务端

bash 复制代码
var Websocket = require('websocket').server
var http = require('http')

var httpServer =  http.createServer().listen(8080,function() {
    console.log('http://127.0.0.1:8080')
})

var wsServer = new Websocket({
    httpServer: httpServer,
    autoAcceptConnections: false
})

// 保存客户端的connection状态
var conArr = []

// 生成事件:request:事件名称 request:请求过来的数据
wsServer.on('request', function (request) {
    // 怎么拿到连接实例
   var connection =  request.accept();
   conArr.push(connection) // 保持
   connection.on('message', function (msg) {
       console.log(msg);
       for (let i = 0; i < conArr.length; i++) {    
           conArr[i].send(msg.utf8Data)
       }
    //    connection.send(msg.utf8Data) //返回至客户端
   })
})

模拟客户端

bash 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="msg"></div>
  <input type="text" id="text">
  <input type="button" value="发生" onclick="send()">
  <script>
    // web客户端的链接
    var websocket = new WebSocket('ws://127.0.0.1:8080')
    console.log(websocket.readyState);
    // readyState: 0:new 链接未建立,正在建立链接 1:链接建立成功 2:链接正在关闭 3:链接已经关闭
    // ws / wss
    // 链接建立是异步的
    websocket.onopen = function(){ // 类似于ajax,需要处理请求状态
      console.log(websocket.readyState);
    }
    function send() {
      var text = document.getElementById('text').value 
      websocket.send(text)
    }

    // 客户端接收服务器传过来的数据
    // 绑定一个服务器推送事件
    websocket.onmessage = function(back) {
      console.log(back.data);
    }
  </script>
</body>
</html>
相关推荐
wordbaby7 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
XiaoMu_0018 分钟前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静13 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia27 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_29 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia29 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub32 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw36 分钟前
hippy的主要原理
前端
子兮曰38 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068838 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign