前端WebSocket连接demo

于 2024-08-27 10:50:56 发布
阅读量269 收藏 5
点赞数 4
文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62766777/article/details/141597169
版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Client</title>
  <!-- Import Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- Import Vue.js and Element UI -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <input v-model="url" type="text" style="width: 20%" /> &nbsp; &nbsp;
      <button @click="join" type="button">连接</button>
      <button @click="exit" type="button">断开</button>
      <br />
      <textarea v-model="message" rows="9"></textarea>
      <button @click="send" type="button">发送消息</button>
      <br />
      <br />
      <textarea v-model="text_content" rows="9"></textarea> 返回内容
      <br />
      <br />
    </div>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          url: "ws://127.0.0.1:8080/webSocket",
          message: "",
          text_content: "",
          ws: null,
        };
      },
      methods: {
        join() {
          const wsuri = this.url;
          this.ws = new WebSocket(wsuri);
          const self = this;
          this.ws.onopen = function (event) {
            self.text_content = self.text_content + "已经打开连接!" + "\n";
          };
          this.ws.onmessage = function (event) {
            self.text_content = event.data + "\n";
          };
          this.ws.onclose = function (event) {
            self.text_content = self.text_content + "已经关闭连接!" + "\n";
          };
        },
        exit() {
          if (this.ws) {
            this.ws.close();
            this.ws = null;
          }
        },
        send() {
          if (this.ws) {
            this.ws.send(this.message);
          } else {
            alert("未连接到服务器");
          }
        },
      },
    });
  </script>
</body>
</html>

无我无她425
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
websocket-Demo
liuhao9999的博客
03-03 600
server.js var ws = require('nodejs-websocket'); var count = 1; var server = ws.createServer(function(socket) {　 socket.on('text', function(str) {　　　 var data = JSON.parse(str); if (data) { server.connections.forEach(functi
前端实现WebSocket即时通讯
m0_67401270的博客
03-09 1793
要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。 HTTP 协议无法做到服务器主动向客户端推送信息，2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。 WebSocket 协议的底层协议也是TCP协议 WebSocket 协议的标识符为ws,加密后为wss WebSocket 协议没有同源限制，即WebSocke
前端连接websocket demo
qq_25073261的博客
01-20 1503
前端连接websocket demo 代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Java后端WebSocket的Tomcat实现</title...
WebSocket 前端demo node.js 加vue
qq_44428688的博客
04-03 310
websoket使得客户端和服务端的数据交换变的更加的简单。允许服务端主动向客户端推送数据，在websoket api中，浏览器和服务器值需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道。浏览器通过该Js向服务器发出建立websocket连接的请求，连接建立以后，客户端和服务端就可以挺高tcp连接直接交换数据，当你获取webscoket连接以后，可以通过send方法向服务器发生数据。websoket能更好的节省服务器资源和宽带，并且能够更实时地进行通讯。node.js搭建简单的服务端。
前端建立WebSocket连接代码
weixin_43783990的博客
01-19 1327
直接上代码吧：方便在服务器上面测试WebSocket 通讯是否有效，不用下载Postman之类的软件测试。 // 打开一个 web socket var ws = new WebSocket("ws://XXXX"); ws.onopen = function() { // WebSocket 已连接上，使用 send() 方法发送数据 ws.send("发送数据"); console.log("数据发送中..."); }; ws.onmessage = function(evt)
实现一个简单的webSocket聊天demo
taolin0的博客
03-10 331
设计一个简单的webSocket聊天demo
WebSocket聊天功能小Demo
爱琴孩的博客
05-11 1035
WebSocket协议是基于TCP的一种网络协议，它实现了浏览器与服务器全双工（Full-duplex）通信。它允许服务端主动向客户端推送数据，这使得客户端和服务器之间的数据交换变得更加简单高效。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
websocket 前+后端协调demo
weixin_45812090的博客
05-24 2424
websocket 前+后端协调
websocket简单demo
zhejingyuan的专栏
11-21 1087
前端代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;     &lt;title&gt;主页面&lt;/title&gt;     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt;  
ws视频流WebSocket播放demo
11-04
在这个demo中，开发者可能通过WebSocket连接服务器，获取视频流数据并在客户端进行解码和播放。 描述“WebSocket视频流播放demo”进一步强调了这个项目的核心功能，即利用WebSocket协议来处理视频流的传输。这通常...
websocket-demo.zip
06-14
这个demo可能包含一个HTML页面，里面使用JavaScript来创建WebSocket连接，并使用Stomp库订阅和发布消息。 5. **消息模型**：WebSocket应用中通常会有特定的消息模型，用于定义服务器和客户端之间交换的数据结构。...
websocket前端Demo.zip
09-06
websocket前端访问客户端demo,HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单
springMvc-websocket-demo
09-18
因此，在部署后，需要确保前端JavaScript代码中的WebSocket连接URL与服务器实际监听的端口一致。 标签"websocket"进一步强调了这个项目的核心技术是WebSocket，这意味着在代码中会涉及WebSocket的生命周期事件（如...
时序预测-基于自回归滑动平均模型时间序列ARIMA预测Matlab程序 点变量
08-30
时序预测|基于自回归滑动平均模型时间序列ARIMA预测Matlab程序 点变量 1.程序功能已完成调试，用户可以通过一键操作生成图形和评价指标。 2.数据输入以Excel格式保存，只需更换文件，即可运行以获得个人化的实验结果。 3.代码中包含详细注释，具有较强的可读性，特别适合初学者和新手。 4.在实际数据集上的效果可能较差，需要对模型参数进行微调。 CSDN：机器不会学习CL 时序预测|基于自回归滑动平均模型时间序列ARIMA预测Matlab程序 点变量 1.程序功能已完成调试，用户可以通过一键操作生成图形和评价指标。 2.数据输入以Excel格式保存，只需更换文件，即可运行以获得个人化的实验结果。 3.代码中包含详细注释，具有较强的可读性，特别适合初学者和新手。 4.在实际数据集上的效果可能较差，需要对模型参数进行微调。 CSDN：机器不会学习CL
基于微信小程序的考研资料分享系统的设计与实现.docx
08-30
基于微信小程序的考研资料分享系统的设计与实现.docx
豆瓣读书书评爬虫软件，使用方便快捷
08-30
豆瓣读书书评爬虫软件将辅助你爬取你感兴趣的书目短评，交互简单，你可以轻松的获取目标书目的指定页数的内容，你可以非常方便地使用该资源即可爬取对应书目的短评内容，可以爬取指定页数的信息，也可以将内容保存到数据库sqlite中，当然也会保存为文本文件，每条评论独占一行，如果后续你要做评论的文本情感分析也会特别方便，如若不会使用，详细使用方式可以看我写的一篇文章，链接在此处，点击可跳转:https://blog.csdn.net/weixin_45938063/article/details/141500999spm=1001.2014.3001.5501 ,该资源收取1积分即可下载，欢迎支持下载，您的支持是我创作的动力
XX市XX区市场局数据治理方案文档
08-30
基于企业监管、食品安全、药品安全、知识产权、特种设备监管等多维数据，通过协同各类数据资源，进行数据汇集、治理，构建支撑XX市XX区市场监管数字化平台的标准化数据库，促进XX市XX区市场监管体系的放管服改革工作，逐步实现XX市XX区全方位、全覆盖、全领域、全过程的一体化数智监管体系。
基于springboot的网上购物商城系统设计与实现.docx
最新发布
08-30
基于springboot的网上购物商城系统设计与实现.docx
构建一个websocket的demo
09-27
### 回答1： 好的。 建立一个 WebSocket 的 demo 示例的步骤如下： 1. 在服务器端安装 ws 模块： ```bash npm install --save ws ``` 2. 在服务器端创建一个 WebSocket 服务器： ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { console.log('新的连接已建立'); ws.on('message', (message) => { console.log(`收到消息：${message}`); }); ws.send('你好！已连接到服务器。'); }); ``` 3. 在客户端创建一个 WebSocket 客户端： ```javascript const socket = new WebSocket('ws://localhost:8080'); socket.onopen = () => { console.log('连接已建立'); socket.send('你好！我是客户端。'); }; socket.onmessage = (event) => { console.log(`收到消息：${event.data}`); }; socket.onclose = () => { console.log('连接已关闭'); }; ``` 这就是一个简单的 WebSocket 示例。希望这对你有帮助。 ### 回答2： WebSocket是一种基于TCP协议的全双工通信协议，它允许在单个连接上进行双向通信。下面我将以300字介绍如何构建一个WebSocket的示例。 首先，我们需要使用一个支持WebSocket的编程语言或框架来实现示例。常见的选择包括JavaScript的WebSocket API、Python的Tornado框架、Java的Spring框架等。这里我选择使用JavaScript的WebSocket API来展示示例。 在前端，我们可以在HTML文件中创建一个WebSocket对象，通过指定服务器的地址创建WebSocket连接： ``` var socket = new WebSocket('ws://server-address'); ``` 在后端，我们可以使用Node.js来创建一个WebSocket服务器，监听指定的端口，并处理WebSocket的连接请求： ``` const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { console.log('received: %s', message); }); ws.send('Hello, client!'); }); ``` 在示例中，当客户端与服务器建立WebSocket连接后，可以通过调用`send`方法向服务器发送消息，通过监听`message`事件来接收服务器发送的消息。服务器也可以通过调用`send`方法向客户端发送消息。 要运行示例，我们需要在本地搭建一个WebSocket服务器，并在浏览器中打开HTML文件来建立WebSocket连接。 通过这个示例，我们可以实现客户端和服务器之间的实时双向通信，使得数据的传输更加高效和即时。WebSocket的优点在于它能够降低网络延迟，减少数据传输的开销，并支持真正的双向通信。 以上就是关于如何构建一个WebSocket的示例的简要介绍，希望对你有所帮助！ ### 回答3： WebSocket是一种在Web应用程序中实现双向通信的协议。通过WebSocket，客户端和服务器可以实时地交换数据。以下是一个简单的WebSocket的Demo： 首先，我们需要在服务器端创建一个WebSocket服务器。可以使用一些流行的编程语言和框架，如Node.js使用Socket.io库，或者Python使用Tornado库来实现。这里以Node.js为例： 1. 在服务器端，在命令行中安装Socket.io库：npm install socket.io 2. 在服务器端创建一个Node.js文件，导入Socket.io库并创建一个服务器对象： ```javascript const io = require('socket.io')(); io.on('connection', (socket) => { console.log('客户端已连接'); socket.on('message', (data) => { console.log('收到消息：', data); io.emit('message', data); }); }); io.listen(3000); console.log('WebSocket服务器已启动'); ``` 3. 在客户端，使用浏览器中提供的WebSocket API来与服务器建立连接并发送和接收消息。可以在HTML文件中添加以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Demo</title> </head> <body> <h1>WebSocket Demo</h1> <input type="text" id="messageInput" placeholder="输入消息"> <button onclick="sendMessage()">发送</button> <ul id="messageList"></ul> <script> const socket = new WebSocket('ws://localhost:3000'); socket.onopen = function() { console.log('已连接到WebSocket服务器'); }; socket.onmessage = function(event) { const message = event.data; const listItem = document.createElement('li'); listItem.textContent = message; document.getElementById('messageList').appendChild(listItem); }; function sendMessage() { const input = document.getElementById('messageInput'); const message = input.value; socket.send(message); input.value = ''; } </script> </body> </html> ``` 以上代码通过创建一个WebSocket对象，并在与服务器成功建立连接后，监听消息的接收。当用户点击发送按钮时，JavaScript代码将用户输入的消息发送到服务器，并将服务器返回的消息添加到页面的消息列表中。 最后，可以运行服务器代码，在浏览器中打开HTML文件，就可以进行WebSocket的测试和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值