html5-websocket聊天例子

最新推荐文章于 2023-08-14 08:15:25 发布
最新推荐文章于 2023-08-14 08:15:25 发布
阅读量2.7w 收藏 5
点赞数
分类专栏： Web2.0 文章标签： html5 聊天 function performance websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ago52030/article/details/6902017
版权 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=620" /> 
<title>HTML5 Demo: Web Socket</title> 
<link rel="stylesheet" href="http://html5demos.com/css/html5demos.css" type="text/css" /> 
<script src="http://html5demos.com/js/h5utils.js"></script></head> 
<body> 
<section id="wrapper"> 
    <header> 
      <h1>Web Socket</h1> 
    </header> 
<style> 
#chat { width: 97%; }
.them { font-weight: bold; }
.them:before { content: 'them '; color: #bbb; font-size: 14px; }
.you { font-style: italic; }
.you:before { content: 'you '; color: #bbb; font-size: 14px; font-weight: bold; }
#log {
  overflow: auto;
  max-height: 300px;
  list-style: none;
  padding: 0;
/*  margin: 0;*/
}
#log li {
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 10px 0;
}
</style> 
<article> 
  <form> 
    <input type="text" id="chat" placeholder="type and press enter to chat" /> 
  </form> 
  <p id="status">Not connected</p> 
  <p>Users connected: <span id="connected">0</span></p> 
  <p>To test, open two windows with Web Socket support, type a message above and press return.</p> 
  <p>The server side code is available here: <a href="http://github.com/remy/html5demos/tree/master/server/">node-web-socket & server</a> (note that it runs on <a href="http://nodejs.org/" title="node.js">nodejs</a>)</p> 
  <ul id="log"></ul> 
</article> 
<script> 
function openConnection() {
  // uses global 'conn' object
  if (conn.readyState === undefined || conn.readyState > 1) {
    conn = new WebSocket('ws://node.remysharp.com:8001');    
    conn.onopen = function () {
      state.className = 'success';
      state.innerHTML = 'Socket open';
    };
 
    conn.onmessage = function (event) {
      var message = JSON.parse(event.data);
      if (typeof message == 'string') {
        log.innerHTML = '<li class="them">' + message.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML;
      } else {
        connected.innerHTML = message;
      }
    };
    
    conn.onclose = function (event) {
      state.className = 'fail';
      state.innerHTML = 'Socket closed';
    };
  }
}
 
var connected = document.getElementById('connected'),
    log = document.getElementById('log'),
    chat = document.getElementById('chat'),
    form = chat.form,
    conn = {},
    state = document.getElementById('status'),
    entities = {
      '<' : '<',
      '>' : '>',
      '&' : '&'
    };
 
 
if (window.WebSocket === undefined) {
  state.innerHTML = 'Sockets not supported';
  state.className = 'fail';
} else {
  state.onclick = function () {
    if (conn.readyState !== 1) {
      conn.close();
      setTimeout(function () {
        openConnection();
      }, 250);
    }
  };
  
  addEvent(form, 'submit', function (event) {
    event.preventDefault();
 
    // if we're connected
    if (conn.readyState === 1) {
      conn.send(JSON.stringify(chat.value));
      log.innerHTML = '<li class="you">' + chat.value.replace(/[<>&]/g, function (m) { return entities[m]; }) + '</li>' + log.innerHTML;
      
      chat.value = '';
    }
  });
 
  openConnection();  
}
 
</script><a id="html5badge" href="http://www.w3.org/html/logo/"> 
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage"> 
</a> 
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section> 
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a> 
<script src="http://html5demos.com/js/prettify.packed.js"></script> 
<script> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script> 
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}</script> 
</body> 
</html>



小张网校

www.xiaozhangwx.com
-IT编程在线学习交流平台
-更多的小伙伴等待你的加入


最新视频课程：
2048游戏的开发


Gerry-Zhang
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5移动聊天demo,h5简易聊天室websocket实现
weixin_34259909的博客
06-18 771
packagecom.ht.chat;importjava.io.IOException;importjava.util.concurrent.CopyOnWriteArraySet;importjavax.websocket.*;importjavax.websocket.server.ServerEndpoint;/***@ServerEndpoint注解是一个类层次的注解，它的...
html5移动聊天demo,融云web点对点聊天Demo
weixin_30891153的博客
06-18 396
这两天帮朋友的客户完善 IM 项目链上遗漏的 WEB 版本，所以就有了这篇文章，我把 git history 上的某节点做了删减，觉得以后可能用得到，也方便别人就给开源出来，本身没什么难度，可以当做演示或测试可行性使用。这里面用的 app_key 与 app_secret 都是测试版的，就 100 个份额，没事的话，大家不要捣乱，谢谢。源码使用clone 或下载源码包，打开后 cd 进入。npm ...
Html5多媒体实现微信语音功能
最新发布
delishcomcn的博客
08-14 792
，机会留给有准备的人。接下来就是，一按按钮就生米煮成熟饭了，对应录音机就是录完了按按钮就播放了，但是在我们程序里面要想播放你不仅要有磁带，还得有录音机，录音机就是audio标签，没有好办，我们new一个。html5 多媒体里面的语音这块换了好几茬规范，很乱，有些标签甚至一个浏览器都没实现过，未曾绽放就枯萎了，你也不用关心也没必要浪费那个时间知道，你只要知道我说这些就够了，因为你知道那些被废掉的过往没啥用，有那个时间还不如来一局LOL或者王者荣耀（虽然我并不懂二者的区别，不过这两个游戏应该都挺好玩吧）。
HTML5 WebSocket实例（一）
天马3798
09-07 1万+
1.实例1： HTML JS var url = 'ws://localhost:55373/upload1.ashx'; var ws = null; //打开链接 function openClick() { ws = new WebSocket(url); ws.onopen = function (e) { console.log('链接打开')
基于WebSocket实现的Android和H5聊天通讯实例【附效果图附所有源码】
lucherr 的学习历程
07-21 1万+
转载请注明出处,原文地址:http://blog.csdn.net/lucherr/article/details/75673810         最近项目需要使用WebSocket实现即时通讯，于是提前进行了技术调研，并且编写了一个聊天的Demo来体验，当然Demo是站在巨人们的肩膀上完成的，感谢前人们的辛苦付出和开源精神。        关于WebSocket的介绍，网上有很
ios-websocket js例子.rar
07-11
WebSocket API是HTML5的一个新特性，它为创建持久的、全双工的连接提供了标准方法。传统的HTTP协议在每次请求/响应交互后都会断开连接，而WebSocket则可以在单个连接上保持开放，直到一方主动关闭。这使得实时应用如...
spring-boot-websocket-client代码示例
08-03
WebSocket API允许开发者创建高效、低延迟的实时应用，如聊天室、股票报价、在线游戏等。 ### 创建WebSocket配置 首先，我们需要配置WebSocket端点。在Spring Boot中，这通常通过实现`WebSocketConfigurer`接口来...
使用Sec-Websocket-Protocol
04-08
在HTML5中被引入，极大地改善了网页应用的实时性。与传统的HTTP请求-响应模式不同，Websocket一旦建立连接，就可以在两端之间持续传输数据，无需反复发起请求。 在"使用Sec-Websocket-Protocol"的场景中，`Sec-...
java-ee7-html5-websocket-example
12-28
WebSocket协议允许服务器和客户端之间建立持久的连接，使得数据能够实时双向传输，这对于构建聊天应用、在线游戏、股票交易等需要实时交互的场景非常有用。 在"java-ee7-html5-websocket-example"项目中，我们将...
HTML5 WebSocket实现点对点聊天的示例代码
09-27
为了实现聊天界面，你需要在HTML页面上创建输入框和发送按钮，使用JavaScript或者jQuery监听按钮点击事件，并使用WebSocket API的 `send()` 方法发送消息。同时，也需要设置WebSocket连接的事件监听器，以便在收到...
websocket demo(页面html客户端)
12-28
此websocket demo是客户端是html写的。这是一个比较完善的项目demo，可以通过此demo学习怎么编写websocket项目
websocket源码经典实例
01-16
webSocket客户端和服务端实例源码 webSocket ws实例 HTML5 用java实现的服务端
websocket完整例子
01-08
websocket使用完整实例，包含信息发送，接收。
Html5 WebSocket c++实例
01-16
实现WebSocket与C++服务端的成功连接的实例:网页客户端,C++Server以及一个国外的完整实例;
HTML5新特性之WebSocket
LiuHe
01-21 1万+
在Web应用越来越复杂的今天，消息推送已经成为一个非常重要的功能了，有了消息推送，Web页面就能够及时的接收到来自服务端的消息，为用户展现最好的交互体验。过去我们在实现Web页面的消息推送时，一般都是由页面发起请求，以轮询的方式向服务器获取数据，实现起来极为不便，业务逻辑也相对较为复杂。 为了解决这个问题，进而实现真正意义上的消息推送，HTML5定义了一套新的规范，这就是WebSocket。下面
HTML5 之WebSocket入门demo和简易聊天室
I can @ me
06-03 9766
HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通...
python 基于标准输入输出的通讯协议_python中基于tcp协议的通信（数据传输）
weixin_39906906的博客
11-20 156
tcp协议：流式协议（以数据流的形式通信传输）、安全协议（收发信息都需收到确认信息才能完成收发，是一种双向通道的通信）tcp协议在OSI七层协议中属于传输层，它上承用户层的数据收发，下启网络层、数据链路层、物理层。可以说很多安全数据的传输通信都是基于tcp协议进行的。为了让tcp通信更加方便需要引入一个socket模块（将网络层、数据链路层、物理层封装的模块），我们只要调用模块中的相关接口就能实现...
基于WebSocket的聊天系统
牧码杭城
08-07 5692
1、WebChat： ASP.NET的MVC模式实现聊天网站 2、WebSocket-Server： C#实现的WebSocket的服务器端 3、AndChat： Android客户端实现代码
HTML5中的websocket实现直播
热门推荐
Aimee的博客
04-03 3万+
做视频直播这一块，前期研究了很多方案，包括websocket，因为各种原因最后没有采取这个方案，最后使用的rtsp推流方案，但还是想记录一下学习的心得。 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 ...
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、付费专栏及课程。

余额充值