websocket通信以及socket.io基础用法

websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

以下 API 用于创建 WebSocket 对象

const ws = new WebSocket(url)

websocket的事件

事件名 事件处理程序 描述

open ws.onopen 连接建立时触发
message ws.onmessage 客户端接收服务端数据时触发
error ws.onerror 通信发生错误时触发
close ws.onclose 连接关闭时触发

websocket的方法

方法名 描述

ws.send() 使用连接发送数据
ws.close() 关闭连接

客户端

客户端使用html5提供的原生的websocket进行通信
实现流程

 // 1 建立链接  使用h5原生的 websocket   使用的协议是ws （wss）  (类似于 http  https)
//  参数就是链接的服务器地址
const ws = new WebSocket('ws://localhost:3000');
//  2  判断链接是否成功
ws.onopen = function(){
    
    
    console.log('链接成功了');
    //  3. 链接成功后，可以向服务器传递数据  send(data) 参数就是传递的数据
    ws.send('发送数据给服务器')                
}

//  4 监听onmessage事件（服务器返回数据的事件）   参数就是服务器返回的数据
ws.onmessage = function(data){
    
    
    //  参数data 是一个MessageEvent对象  返回的数据在 data属性中
    console.log(data.data);                
}

//  监听错误
ws.onerror = function(err){
    
    
    console.log(err);    
}

//  监听关闭事件
ws.onclose = function(){
    
    
    console.log('客户端监听到链接关闭了');    
}

服务器端

借助插件 nodejs-websokcet 创建一个websocket的服务器端
首先初始化出现npm init -y nodepackage.json

1. 安装插件

npm i nodejs-websocket --save

2. 搭建服务

//  引入  nodejs-websocket 插件
const ws = require('nodejs-websocket')
// 1 搭建服务
//  参数 conn 就是当前的连接线 （当前在线的人）
ws.createServer((conn) => {
    
    
    // 2 监听text 事件  就是客户端向服务器端传递的数据
    conn.on('text', (str) => {
    
    
        //  参数 str 就是客户端向服务器传递的数据
        console.log(str);
        // 3 服务器向客户端返回数据 sendText(data)  参数data就是服务器返回的数据
        conn.sendText('服务器返回数据了')        
    })

    //  监听错误信息
    conn.on('error', (err) => {
    
    
        console.log(err);        
    })

    //  监听关闭事件
    conn.on('close', () => {
    
    
        console.log('链接关闭');        
    })
}).listen(3000, () => {
    
    
    console.log('server running ...');    
})

这样就完成了一个基础的通信
运行是node server
html方式打开

socket.io 的用法

官网https://socket.io/
他可以结合多个框架使用，结合不同框架，组件建服务器端的方式也不同

首先客户端 也要有socket.io

它还需要客户端的socket.io-client
下载地址
下载客户端的socket.io.js 在页面中引入js文件

<script src="/socket.io/socket.io.js"></script>

服务器端

下载服务端的socket.io 第三方包

npm i socket.io --save

socket.io在 express 框架中的用法

这是服务器端

1. 安装依赖

npm init -y // 初始化 
npm i express  socket.io --save

2. 搭建服务器

拆分形式写法

const express = require('express')
const socket = require('socket.io')
const http = require('http')

const app = express();
// 都可以搭建服务器
// const server = http.Server(app)
const server = http.createServer(app)
const io = socket(server);


server.listen(3000, () => {
    
    
    console.log('server ....')
})

综合写法

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);


server.listen(3000, () => {
    
    
    console.log('server ....')
})

socket.io的基本用法

不管是客户端还是服务器端，都是通过 提交事件 emit()和监听事件on() 进行通信

emit()提交事件

socket.emit(eventName, value) 提交事件，

on() 监听事件

socket.on(eventName, (data) => {})

服务器发送消息的方式

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

//  监听链接事件
io.on('connection', (socket) => {
    
    
    //  socket 当前在线的人的电话线
    socket.on('clientMsg', (value) => {
    
    
        // 方式1  自己给自己发消息
        socket.emit('send', value)
        //  方式2  自己给所有人发消息 （包含你自己） 通过 io对象
        io.emit('toAll', value)
        //  方式3   自己给所有人发消息，但是不包含自己  广播形式broadcast
        socket.broadcast.emit('hi');        
    })    
})

server.listen(3000, () => {
    
    
    console.log('server ....')
})

1. 自己给自己发消息
   socket.emit('send', value)
2. 自己给所有人发消息 （包含你自己） 通过 io对象
   io.emit('toAll', value)
3. 自己给所有人发消息，但是不包含自己 广播形式broadcast
   socket.broadcast.emit('hi');

实例:
运行 node server
使用:localhost:3000