首页 > 其他分享 >简单的WebSocket对话

简单的WebSocket对话

时间:2023-06-09 09:56:37浏览次数:48  
标签:const socket console 对话 简单 WebSocket message event

步骤

  1. 选择一个WebSocket服务器,这里选择到的模块是ws模块

npm i ws

  1. 创建一个 WebSocket 服务器 新建一个 server.js 编写如下代码

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (socket) => {
  console.log('Client connected');

  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 回复消息
    const reply = `You said: ${message}`;
    socket.send(reply);
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});

  1. 这时候我们需要一个页面进行发送消息,所以新建一个index.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Chat</title>
</head>
<body>
  <div id="messages"></div>
  <form id="message-form">
    <input type="text" id="message-input">
    <button type="submit">Send</button>
  </form>

  <script>
    const socket = new WebSocket('ws://localhost:3000');
    let flag = false
    socket.addEventListener('open', (event) => {
      console.log('Connected to WebSocket server');
    });
    socket.addEventListener('message', (event) => {
      if(flag) { // 是我方的话不走以下
        flag = false
        return
      }
      const message = event.data
      if (message instanceof Blob) {
        const reader = new FileReader();
        reader.readAsText(message);
        reader.onload = () => {
          const text = reader.result;
          displayMessage(text, '对方');
        };
      } else {
        displayMessage(message);
      }
    })
    socket.addEventListener('close', (event) => {
      console.log('Disconnected from WebSocket server');
    });

    const form = document.getElementById('message-form');
    const input = document.getElementById('message-input');
    const messages = document.getElementById('messages');
    
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const message = input.value;
      input.value = ''
      flag = true
      socket.send(message);
      displayMessage(message, '我');
    });

    function displayMessage(message, name) {
      const p = document.createElement('p');
      p.textContent = name+': '+message;
      messages.appendChild(p);
    }
  </script>
</body>
</html>


这个HTML页面包含了一个消息输入框和一个发送按钮,当用户在输入框中输入消息并点击发送按钮时,会将消息发送到WebSocket服务器,并将其显示在页面上
通过 socket.send 来发送消息、通过 socket.addEventListener 来监听页面收到的消息、通过 displayMessage 函数来将消息显示在页面上
nodejs 来启动 server.js 如下 node serve.js
在单独打开两个 index.html 就能进行对话了

标签:const,socket,console,对话,简单,WebSocket,message,event
From: https://www.cnblogs.com/dcyd/p/17468315.html

相关文章

  • 实现一个简单的时间驱动处理框架
    事件驱动框架允许程序处理外部事件,如网络连接、文件I/O、超时和信号。事件驱动框架可以让程序通过回调函数处理不同的事件,回调函数可以在事件触发时立即被调用。要实现一个简单事件驱动框架,首先需要创建一个事件处理函数,它是根据发生的不同事件调用不同的回调函数。然后,我们......
  • 移动语义的简单示例
    下面是一个使用移动语义的简单示例:#include<iostream>#include<string>classMyString{public:MyString():m_data(nullptr),m_size(0){}MyString(constchar*str):MyString(){m_size=strlen(str);m_data=newchar[m_size+1......
  • Java Kafka简单地将Map对象序列化为json
    最近用到kafka,想简单地把Map对象序列化为json发送到主题,直接用string序列化,生成的结果不是json,虽然格式很像,key都没有引号,可能是直接调用的toString方法。但是网上搜了一圈,都是spring组合或者其他不太简单的方案。在哔站看了一段视频受到启发,就实现了一个自定义json序列化类,......
  • 02-MyBatis-CRUD-配置文件、参数封装、mybatisX插件、动态sql, 简单的用注解开发
    文章目录MybatisCRUD练习1,配置文件实现CRUD1.1环境准备Debug01:别名mybatisx报错1.2查询所有数据1.2.1编写接口方法1.2.2编写SQL语句1.2.3编写测试方法1.2.4起别名解决上述问题1.2.5使用resultMap解决上述问题1.2.6小结1.3查询详情1.3.1编写接口方法1.3.2编写SQL语句......
  • 对话系统(任务型、检索式、生成式对话论文与工具串讲)
    Motivation对话是一个很大的概念,有非常非常多的子问题,刚入坑的小伙伴很可能迷失在对话的一小块区域里无法自拔,本文就是为解决这一类问题的。希望读者在看完本文后,可以理清楚对话的每个概念为什么而存在,以及它在整个对话王国中的位置。不过,小夕也未能关注到对话领域的每个角落,一些小......
  • 关于HTML 5文档结构的简单案例
    在HTML文档的开头,一般会有一个文档类型声明(DOCTYPE)。在HTML5中,文档类型声明为<!DOCTYPEhtml>(注意大小写)。因此,如果一个网页的文档类型声明为<!DOCTYPEhtml>,那么这个网页就是采用了HTML5。但需要注意的是,并不是所有的网页都需要文档类型声明。如果一个网页没有文档类型声明,也不......
  • XPath 简单语法
    XPath是XML的查询语言,和SQL的角色很类似。以下面XML为例,介绍XPath的语法。<?xmlversion="1.0"encoding="ISO-8859-1"?><catalog><cdcountry="USA"><title>EmpireBurlesque</title><artist>BobDylan</arti......
  • Mybatis的配置与简单使用
    Mybatis的开发步骤官网入门手册中说明如下:创建项目加入依赖执行SQLXMLXML配置文件中包含了对MyBatis系统的核心设置,包括获取数据库连接实例的数据源(DataSource)以及决定事务作用域和控制方式的事务管理器(TransactionManager)获得SqlSessionFactoryBuilder获得SqlS......
  • 简单的《找不同汉字版》,来考考你的眼力吧
    概述简单的《找不同汉字版》,来考考你的眼力吧一、准备工作本次游戏开发需要用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(现在最新的版本是1.6.0)。引擎下载的位置:http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar引擎API文档:http://lufylegend.com/lu......
  • web接收websocket
    data(){return{websock:null,wsuri:"ws://192.168.2.22:8025/test/fff",//WebSocket的后台地址actiones:{ssid:"fff"},//传入后台的数据};},created(){this.initWebSocket();//开启WebSocket},destroyed(......