nodejs之实现HTML5中WebSocket

最新推荐文章于 2024-05-19 16:05:22 发布

牛先森家的牛奶

最新推荐文章于 2024-05-19 16:05:22 发布

阅读量486

点赞数

分类专栏： nodejs 文章标签： node.js html5

本文链接：https://blog.csdn.net/weixin_42681295/article/details/107967744

版权

nodejs 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML5之WebSocket

WebSocket

在nodejs中 ws模块

协议

HTTP/HTTPS 协议

http/https协议可以总结几个特点：

一次性的、无状态的短连接：客户端发起请求、服务端响应、结束。
被动性响应：只有当客户端请求时才被执行，给予响应，不能主动向客户端发起响应。
信息安全性：得在服务器添加 SSL 证书，访问时用 HTTPS。
跨域：服务器默认不支持跨域，可在服务端设置支持跨域的代码或对应的配置。

TCP 协议

TCP 协议可以总结几个特点：

有状态的长连接：客户端发起连接请求，服务端响应并建立连接，连接会一直保持直到一方主动断开。
主动性：建立起与客户端的连接后，服务端可主动向客户端发起调用。
信息安全性：同样可以使用 SSL 证书进行信息加密，访问时用 WSS 。
跨域：默认支持跨域。

WebSocket 协议

WebSocket 目前由 W3C 进行标准化。WebSocket 已经受到 Firefox 4、Chrome 4、Opera 10.70 以及Safari 5 等浏览器的支持。如果在前端我们可以把 AJAX 请求当作一个 HTTP 协议的实现，那么，WebSocket 就是 TCP 协议的一种实现。

使用Socket

服务端

安装ws模块

    npm install ws

开启WebSocket服务器

    let socketServer = require('ws').Server;
    let wss = new socketServer({
        port: 1001
    });

配合express开启服务器

    let express = require('express');
    let http = require('http');
    let ws = require('ws');

    let app = express();
    let server = http.Server(app);
    let SocketServer = ws.Server;
    let wss = new SocketServer({
        server,
        port:3000
    });

用 on 来进行事件监听
- connection：连接监听，当客户端连接到服务端时触发该事件，返回连接客户端对象
  - close：连接断开监听，当客户端断开与服务器的连接时触发
  - message：消息接受监听，当客户端向服务端发送信息时触发该事件
  - send: 向客户端推送信息

客户端

WebSocket是HTML5开始提供的一种基于 TCP 的协议，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据

实例化 WebSocket ，参数为 WebSocket 服务器地址，建立与服务器的连接
事件
- onopen：当网络连接建立时触发该事件
- onclose：当服务端关闭时触发该事件
- onerror：当网络发生错误时触发该事件
- onmessage：当接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件
方法
- close(): 在客户端断开与服务端的连接 socket.close();
- send()：向服务端推送消息

    //连接 socket 服务器
    var socket = new WebSocket('ws://localhost:3000');
   
    //监听 socket 的连接
    socket.onopen = function(){
       document.write("服务已连接 ws://localhost:3000");
    }
   
    //监听服务端断开
    socket.onclose = function(){
        document.write("服务已断开");
        socket = null;
    }

    //监听服务端异常
    socket.onerror = function(){
        document.write("服务错误");
        socket = null;
    }

    //监听服务端广播过来的消息
    socket.onmessage = function(msg){
        var msgObj = JSON.parse(msg.data);
        if(msgObj.status == 0){
            $('<p>' + msgObj.nickname + '[' + msgObj.time + ']退出聊天</p>').appendTo('.msgList');
        } else{
            $('<p>' + msgObj.nickname + '[' + msgObj.time + ']：' + msgObj.message + '</p>').appendTo('.msgList');
        }
    }

    var sendMessage = function(_mess){
        if(socket){
            var myDate = new Date();
            var now = myDate.getMonth() + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();             
            
            var mesObj = {
                nickname: $('#nickName').val(),
                message: _mess || $('#mesBox').val(),
                time: now
            }
            //向服务端发送消息
            socket.send(JSON.stringify(mesObj));
        }           
    }

知识点补充

websocket
- 特点：
  - 长连接
  - 服务端与客户端都可以主动发起请求
  - 不受同源策略限制
多人聊天室
- 服务端
  - 依赖 ws模块
  - 步骤
    启动一个socket服务器
- 客户端
  - html5新特性WebSocket
socket心跳包：用于检测客户端和服务端是否处于连接状态

不断给服务器发送心跳包(每间隔一段时间给服务器发送一条简单的数据)
- 由客户端发起心跳包
- 由服务器发起心跳包

推荐博客：websocket详解教程

基础webSocket的多人聊天室

chat.js

/**
 * 基础 websocket 的多人聊天室
 * 依赖 ws 模块
 * 
 */
const http = require('http')
const express = require('express')
const ws = require('ws')

// 启动express服务器
const app=express()

app.use(express.static('./'))

// 利用 http 模块连接express 服务器和socket服务器
const server=http.createServer(app)

// 启动一个websocket 服务器
let wss=new ws.Server({
  server
})

// 注意：必须使用createServer返回的服务器监听端口
server.listen(3000,()=>{
 console.log('server is running')
})


// 监听事件
wss.on('connection',(client)=>{
  // 当客户端连接socket 服务器，触发connection 事件
  // client ： 客户端对象
  console.log('connection',wss.clients.size)
  client.on('message',(msg)=>{
    console.log('msg',msg)
    // 收到信息，广播给所有连接的用户
    wss.clients.forEach(item => {
      item.send(msg)
    });
  })
})

chat.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线聊天室</title>
  <style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .chat-list {
      position: relative;
      width: 600px;
      margin: 0 auto;
    }

    .chat-list ul {
      padding: 10px;
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
      border: 1px solid #ddd;
    }

    .chat-list li {
      float: left;
      clear: both;
      margin: 10px 0;
      padding: 5px;
      line-height: 2;
      border-radius: 5px;
      background-color: #efefef;
    }

    .chat-list li h4 {
      margin: 0;
    }

    .chat-list li.active {
      float: right;
      background-color: #58bc58;
      color: #fff;
    }

    .chat-list textarea {
      display: block;
      min-height: 50px;
      margin: 10px 0;
      width: 100%;
      box-sizing: border-box;
    }

    /* .status{display:none;
    position: absolute;
    left:50px;
    bottom:0;
    right:0;
    padding:5px 10px;
    text-align:center;
    color:#999;} */

    .login {
      text-align: right;
    }
  </style>
</head>

<body>
  <h1>在线聊天室</h1>
  <div id="chat" class="chat-list">
    <div class="login"><input type="text" name="username" id="username"><button class="btn-login">进入</button><button
        class="btn-logout">退出</a></div>
    <ul>
    </ul>
    <textarea></textarea>
    <button class="btn-send">提交</button>
    <div class="status"></div>
  </div>
  <script>
    /**
     *  客户端WebSocket
         * 连接socket服务器
         * 发送消息给socket服务器
             * 消息格式：{username,msg,date,type}
                 * type
                     * 0：退出聊天室
                     * 1: 进入聊天室
                     * 2：发送消息
     */

    let chat = document.querySelector('#chat');
    let login = chat.querySelector('.login');
    let username = login.children[0];
    let btnLogin = login.children[1];
    let btnLogout = login.children[2];

    let msglist = chat.querySelector('ul');
    let msg = chat.querySelector('textarea');
    let btnSend = chat.querySelector('.btn-send');
    let status = chat.querySelector('.status');

    let socket;
    let datalist = [];

    // 登录&退出
    login.onclick = (e) => {

      let _username = username.value.trim();
      if (e.target.className === 'btn-login') {
        // 进入聊天室

        if (socket) {
          return;
        }

        if (_username === '') {
          alert('请输入您的名字')
          return;
        }

        // 连接 socket 服务器
        socket = new WebSocket('ws://localhost:3000');

        // 监听 socket 的连接
        socket.onopen = function () {
          // 连接服务器城后触发open事件
          status.innerText = "服务已连接 ws://localhost:3000";

          const data = {
            username: username.value,
            msg: '',
            date: Date.now(),
            type: 1
          }
          socket.send(JSON.stringify(data));

          // 禁用用户名修改
          username.disabled = true;
        }

        // 接收服务器广播的消息
        socket.onmessage = (e) => {
          // 接收的是json格式
          const data = JSON.parse(e.data);
          // 判断data的type 是多少
          switch (data.type) {
            case 0:
              status.innerText = `${data.username}退出聊天室`;
              break;
            case 1:
              status.innerText = `${data.username}进入聊天室`;
              break;
            case 2:
              datalist.push(data);
              render();
          }
        }

        // 当前用户退出事件
        socket.onclose = () => {
          // 禁用解除，并让socket为null,为了下次进入
          username.disabled = false;
          socket = null;
        }
      } else if (e.target.className === 'btn-logout') {
        // console.log("退出")
        // 退出聊天室
        const data = {
          username: username.value,
          msg: '',
          date: Date.now(),
          type: 0
        }
        socket.send(JSON.stringify(data));
        socket.close()
      }
    }

    // 发送消息
    // 1.客户端发送消息给服务端（统一格式）
    // 2.socket服务器把消息广播给所有连接到服务器的客户端
    btnSend.onclick = () => {
      const data = {
        username: username.value,
        msg: msg.value,
        date: Date.now(),
        type: 2
      }
      socket.send(JSON.stringify(data));

      // 清除里面的内容，并自动聚焦
      msg.value = '';
      msg.focus();
    }

    function render() {
      msglist.innerHTML = datalist.map(item =>
        `<li class="${item.username === username.value ? 'active' : ''}">
          <h4>${item.username}：</h4>
          <div class="content">${item.msg}</div>
          <time>${formatDate(item.date)}</time>
      </li>`).join('')
    }

    function formatDate(date) {
      let d = new Date(date);
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      let hours = d.getHours();
      let min = d.getMinutes();
      let sec = d.getSeconds();

      // 补0
      hours = hours < 10 ? '0' + hours : hours
      min = min < 10 ? '0' + min : min
      sec = sec < 10 ? '0' + sec : sec

      return `${year}-${month}-${day} ${hours}:${min}:${sec}`
    }
  </script>
</body>

</html>

package.json

{
  "name": "chat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1",
    "ws": "^7.3.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}