websocket入门实例二

最新推荐文章于 2019-06-18 10:03:00 发布
最新推荐文章于 2019-06-18 10:03:00 发布
阅读量261 收藏
点赞数
分类专栏： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39243221/article/details/80535266
版权

建立一个java web项目

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018\6\1 0001
  Time: 9:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>websocket</title>
  </head>
  <body>
    <h1>Echo Test</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
      //websocket的协议
      var websocket=new WebSocket("ws://echo.websocket.org/");
      //调用回调函数
      websocket.onopen=function(){
          console.log('wbesocket open');
          document.getElementById('recv').innerHTML='Connected';
      }
      websocket.onclose=function () {
          console.log('websocket close');
      }
      websocket.onmessage=function (e) {
          console.log(e.data);
          document.getElementById('recv').innerHTML=e.data;
      }
      document.getElementById("sendBtn").οnclick=function(){
          var txt=document.getElementById("sendTxt").value;
          websocket.send(txt);
      }
    </script>
  </body>
</html>

启动服务：


Younger成
关注
专栏目录
websocket项目案例
07-15
使用websocket实现图文直播功能的一个demo，代码简单明了，是websocket应用入门的一个很好的例子
websocket项目demo
01-10
WebSocket 项目demo资源. WebSocket 是一种网络通信协议
WebSocket实战（一）
weixin_33743880的博客
06-18 152
每天都要good good study~~~ 一.websocket的使用场景 1.B站的弹幕，客户端发消息，服务端进行展示。所有用户可见，或者客户端指定客户可见。 二：技术框架基本介绍：springboot 1、简化新Spring应用的初始搭建以及开发过程 2、嵌入的Tomcat，无需部署WAR文件 3、简化Maven配置, 自动配置Spring 学习资料：1、官网 ...
WebSocket实例项目
美奇软件开发工作室
04-16 6108
一、项目简介WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，这里就将使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。二、涉及知识点网页前端（HTML+CSS+JS）和Java三、软件环境 Tomcat 7 JDK 7 Eclipse JavaEE 现代浏览器 四、效果截图效果1效果2五、项目实战 1....
WebSocket案例
08-01
WebSocket案例代码，当做一个模板使用吧，直接修改url，复制代码到浏览器控制台运行即可
node+websocket入门实例
11-07
node+websocket入门实例,在谷歌测试成功。 1) 安装nodejs。 2) 执行cmd进入命令窗口，cd websocketdemo目录。 3) node server.js 4) 双击client.html显示页面。 5）输入信息，点击send。
Javascript WebSocket使用实例介绍（简明入门教程）
12-08
- `2` (WebSocket.CLOSING)：连接正在关闭。 - `3` (WebSocket.CLOSED)：连接已关闭或无法打开。 2. `bufferedAmount`：这是一个读属性，表示已经使用`send()`方法但尚未在网络上传输的UTF-8编码字节数。 ...
websocket入门demo
06-19
在"websocket入门demo"中，我们将会探讨WebSocket的基本使用方法和实现过程。这个项目包含了WebSocket服务端和客户端的代码示例，可以帮助初学者快速理解WebSocket的工作原理和应用。 1. **WebSocket协议概述**：...
WebSocket入门
06-12
你需要创建一个WebSocket实例，设置监听的端口，然后使用AcceptWebSocketAsync方法接受客户端的连接。 客户端方面，我们同样使用C#编写。客户端需要连接到服务器的WebSocket服务，这通常通过提供服务器的地址和端口...
websocket简单示例web项目，直接部署可使用
10-21
websocket示例，这个是我在项目中使用过的，绝对好用，非maven项目，直接eclipse部署
websocket案例demo
08-16
websocket解决了B/S架构的通信问题，基于websocket，服务器可以向浏览器发送消息，需要maven环境
WebSocket 应用案例
01-13
服务端（基于 Tomcat7）及客户端（基于浏览器原生 HTML5 API）实现的详细步骤；并通过实际客户案例描述了客户端如何在 WebSocket 架构下使用 HTTP 长连接与服务器实现实时通信及消息推送的功能
webSocket 搭建实例
05-25
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
websocket使用案例
08-28
websocket使用入门案例，详情请见博客http://blog.csdn.net/u012702547/article/details/77655826
Websocket简单实例
07-09
Websocket简单实例 便于理解websocket工作方式 tomcat7.0.55+JDK1.7
WebSocket_实例
子龙修仙的博客
05-27 280
握手协议的客户端数据已经由浏览器代劳了，服务器端需要我们自己来实现，目前市场上开源的实现也比较多如：    Kaazing WebSocket Gateway(一个 Java 实现的 WebSocket Server)；    mod_pywebsocket(一个 Python 实现的 WebSocket Server)；    Netty(一个 Java 实现的网络框架其中包括了对 WebSoc...
WebSocket ：用WebSocket实现推送你必须考虑的几个问题
热门推荐
shangmingtao的博客
07-23 12万+
目录：目录 WebSocket简介 项目背景硬件环境及客户端支持 本文研究内容 基于javaxwebsocket服务端代码源码后续补充git连接 客户端代码 问题探索 如何做到支持几千个client同时在线人数 后续1.WebSocket简介WebSocket_百度百科2.项目背景、硬件环境及客户端支持本项目通过WebSocket实现同时在线用户量5k推送服务器（可内网运行）。且可实时查看用户在线状
WebSocket实例教程
xqhys的博客
12-03 337
一.WebSocket简单介绍 WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成握手。 　　随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端...
WebSocket使用例子
swt198852的专栏
11-20 1471
http://www.html5china.com/HTML5features/WebSocket/ 本篇将以示例说明WebSocket的使用，这个示例同时结合了TWaver HTML5的使用，场景如下：后台提供拓扑数据，并以JSON格式通过WebSocket推送到各个客户端，客户端获取到拓扑信息后，通过TWaver HTML5的Network组件呈现于界面，客户端可以操作网元，操作结果通过
WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室
最新发布
05-27
好的，下面是关于WebSocket实例的简单多人聊天室的教程： 在这个例子中，我们将创建一个简单的多人聊天室，用户可以在其中发送消息，同时所有连接到聊天室的用户都将看到这些消息。 1. 首先，我们需要一个HTML页面，用于显示聊天室的界面。创建一个新文件`index.html`，并添加以下内容： ```html <!DOCTYPE html> <html> <head> <title>WebSocket Chat Room</title> </head> <body> <div id="chatBox"></div> <form> <input type="text" id="messageInput" /> <button type="submit">Send</button> </form> <script src="chat.js"></script> </body> </html> ``` 这是一个非常简单的HTML页面，其中包含一个`<div>`元素，用于显示聊天记录，以及一个`<form>`元素，用于发送新的聊天消息。我们还添加了一个JavaScript文件`chat.js`，稍后我们将在其中编写聊天室的逻辑。 2. 接下来，我们需要编写聊天室的服务器端代码。创建一个新文件`server.js`，并添加以下内容： ```javascript const WebSocket = require("ws"); const server = new WebSocket.Server({ port: 8080 }); const connections = []; server.on("connection", (socket) => { console.log("New client connected"); connections.push(socket); socket.on("message", (message) => { console.log(`Received message: ${message}`); connections.forEach((connection) => { if (connection !== socket) { connection.send(message); } }); }); socket.on("close", () => { console.log("Client disconnected"); const index = connections.indexOf(socket); if (index > -1) { connections.splice(index, 1); } }); }); ``` 这是一个非常简单的WebSocket服务器，它监听端口`8080`上的所有连接。每当有新客户端连接时，服务器都会将其添加到`connections`数组中。当服务器收到任何消息时，它将将该消息发送给所有其他连接的客户端。当客户端断开连接时，服务器将从`connections`数组中删除该客户端。 3. 最后，我们需要编写客户端代码，用于连接到聊天室并发送消息。在`chat.js`文件中添加以下内容： ```javascript const socket = new WebSocket("ws://localhost:8080"); const chatBox = document.getElementById("chatBox"); const messageInput = document.getElementById("messageInput"); socket.onmessage = (event) => { const message = event.data; const messageElement = document.createElement("div"); messageElement.innerText = message; chatBox.appendChild(messageElement); }; document.querySelector("form").addEventListener("submit", (event) => { event.preventDefault(); const message = messageInput.value.trim(); if (message.length > 0) { socket.send(message); messageInput.value = ""; } }); ``` 这是一个非常简单的WebSocket客户端，它连接到服务器端口`8080`，并通过`onmessage`事件处理程序处理来自服务器的任何消息。每当客户端发送新消息时，它将通过`socket.send`方法将该消息发送到服务器。 4. 最后，启动服务器：在终端中运行`node server.js`。 5. 在浏览器中打开`index.html`文件，你应该看到一个简单的聊天室界面。在多个浏览器窗口中打开该界面，并尝试在其中一个窗口中发送消息。你将看到该消息立即显示在所有窗口中。 现在你已经创建了一个简单的WebSocket聊天室，你可以扩展它以包括更多功能，例如昵称、私人消息、表情符号等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值