node.js + websocket

node.js + websocket

官方教程是用express搭的服务器,教程其实很清楚,但是不知道为什么我报错了,好像是引入那个juery包失败

  1. 安装npm install nodejs-websocket --save
  2. 直接在visual stdio终端执行就可以
chat.html  
<!DOCTYPE html>
<html lang=‘en‘>
  <head>
    <meta charset=‘UTF-8‘/>
    <meta name="viewport" content = "width=divice-width,initial-scale=1.0"/>
    <title>Socket.IO chat</title>
    <style>
      div{
        width:800px;
        height:500px;
        background-color: bisque;
        border: darkkhaki;
      }
      button { width: 9%; background: darksalmon; border: none; padding: 10px; }
    </style>  
  </head>
  <body>
    <input type = ‘text‘ placeholder="请输入你的内容" />
    <button>Send</button>
    <div></div>
  </body>
</html>

<script>
  var div = document.querySelector(‘div‘)
  var button = document.querySelector(‘button‘)
  var input = document.querySelector(‘input‘)
  //有了自己的server,就可以连接自己的server   ws://echo.websocket.org
    var socket = new WebSocket(‘ws://localhost:3000‘);
    socket.addEventListener(‘open‘,function(){
      div.innerHTML = ‘连接成功‘
    })
    button.addEventListener(‘click‘,function(){
      var value = input.value;
      socket.send(value)
    })
    socket.addEventListener(‘message‘,function(e){
      console.log(e.data)
      div.innerHTML = e.data
    })
    socket.addEventListener(‘close‘,function(){
      div.innerHTML = ‘服务断开连接‘
    })
  </script>

server.js
//导入node.js-websocket
const ws = require(‘nodejs-websocket‘)
const PORT = 3000
//创建一个server
//每次有用户连接,函数就会被执行,就会给用户创造一个连接对象
const server = ws.createServer(connect => {
  console.log("an user connected.")
  connect.on(‘text‘,data => {
    //我个人感觉,这个server.js就是自己实现那个url实现的功能
    console.log("接收到了用户的数据",data)
    connect.send(data)
    //connect.send(data.toUpperCase()+"!!!")
  })

connect.on(‘close‘,() => {
  console.log("连接断开了")
})
connect.on(‘error‘,() => {
  console.log("用户连接异常")
})



})
server.listen(PORT,() => {
  console.log(‘websocket启动成功‘)
})

node.js + websocket
node.js + websocket

node.js + websocket

上一篇:[SWPUCTF 2018]SimplePHP


下一篇:上传图像裁剪功能