websocket基本使用

一 区别

websocket与http区别：

• http基于请求-响应的形式，服务器无法主动给浏览器发送消息，需要浏览器端先发起请求服务器才会进行响应，一次请求和响应便结束，是非持久协议；
• websocket实现浏览器与服务器全双工通信，可以主动给浏览器发送消息，是一种持久协议；

二 应用

现在很多网站都有实时推送的请求，比如聊天，发送更新消息等，两种实现方式：

1. http：通过ajax轮询，定时给浏览器发送请求，服务器将最新数据响应给浏览器，缺点：浪费性能资源。
2. websocket：建立一次连接，可以实施响应；（推荐）

三：基本使用  

h5提供了websocket的API，可以直接使用 WebSocket - Web API | MDN (mozilla.org)

1.参数：服务器地址

2.open：建立连接时触发

3.socket.send：主动给服务器发送消息时

4.message:接收到服务器消息时触发

// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});

四 搭建nodejs服务

1.选用nodejs-websocket包

npm install nodejs-websocket

2.使用、创建server

创建app.js文件

const ws=require('nodejs-websocket')
const PORT=3000
// 创建服务，每次有用户连接，下面函数执行，为用户创建一个connect对象
const server=ws.createServer(conn=>{
    console.log('连接~')
    // 每次接收到用户传递的数据，text事件触发，data：用户数据
    conn.on('text',data=()=>{
        // 给用户一个响应
        conn.send('接收到了'+data)
    })
    conn.on('close',()=>{
    })
    // 处理报错信息
    conn.on('error',()=>{
    })
})
// 监听端口
server.listen(PORT,()=>{
    console.log('success')
})

3.启动服务