- 浏览: 1444747 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (691)
- linux (207)
- shell (33)
- java (42)
- 其他 (22)
- javascript (33)
- cloud (16)
- python (33)
- c (48)
- sql (12)
- 工具 (6)
- 缓存 (16)
- ubuntu (7)
- perl (3)
- lua (2)
- 超级有用 (2)
- 服务器 (2)
- mac (22)
- nginx (34)
- php (2)
- 内核 (2)
- gdb (13)
- ICTCLAS (2)
- mac android (0)
- unix (1)
- android (1)
- vim (1)
- epoll (1)
- ios (21)
- mysql (3)
- systemtap (1)
- 算法 (2)
- 汇编 (2)
- arm (3)
- 我的数据结构 (8)
- websocket (12)
- hadoop (5)
- thrift (2)
- hbase (1)
- graphviz (1)
- redis (1)
- raspberry (2)
- qemu (31)
- opencv (4)
- socket (1)
- opengl (1)
- ibeacons (1)
- emacs (6)
- openstack (24)
- docker (1)
- webrtc (11)
- angularjs (2)
- neutron (23)
- jslinux (18)
- 网络 (13)
- tap (9)
- tensorflow (8)
- nlu (4)
- asm.js (5)
- sip (3)
- xl2tp (5)
- conda (1)
- emscripten (6)
- ffmpeg (10)
- srt (1)
- wasm (5)
- bert (3)
- kaldi (4)
- 知识图谱 (1)
最新评论
-
wahahachuang8:
我喜欢代码简洁易读,服务稳定的推送服务,前段时间研究了一下go ...
websocket的helloworld -
q114687576:
http://www.blue-zero.com/WebSoc ...
websocket的helloworld -
zhaoyanzimm:
感谢您的分享,给我提供了很大的帮助,在使用过程中发现了一个问题 ...
nginx的helloworld模块的helloworld -
haoningabc:
leebyte 写道太NB了,期待早日用上Killinux!么 ...
qemu+emacs+gdb调试内核 -
leebyte:
太NB了,期待早日用上Killinux!
qemu+emacs+gdb调试内核
参考[url]http://www.adobe.com/devnet/archive/html5/articles/real-time-data-exchange-in-html5-with-websockets.html
[/url]
server端还是用tomcat7的方式
客户端
tomcat7下的服务端
HelloWorldWebSocketServlet.java
tomcat的配置文件:
[/url]
server端还是用tomcat7的方式
客户端
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body onload="startServer()"> <canvas id="myCanvas" width="400px" height="500px">myCanvas</canvas> <canvas id="yourCanvas" width="400px" height="500px">yourCanvas</canvas> <div id="chatdiv" width="400px" height="500px">chatdiv</div> <input type="text" id="textMessage" size="20" /> <input type="button" onclick="sendMessage()" value="Send"> <input type="button" onclick="sendphoto()" value="sendphoto"> </body> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var context=myCanvas.getContext('2d'); var imagewidth=myCanvas.width; var imageheight=myCanvas.height; var yourCanvas=document.getElementById("yourCanvas"); var context2=yourCanvas.getContext('2d'); var image = new Image(); image.src = "haoba.jpg"; image.onload = function(){ context.drawImage(image,0,0); var imgData=context.getImageData(50,50,200,200); context2.putImageData(imgData,10,260); //ctx.putImageData(imgData,200,260,50,50,100,100); }; var ws = null; function startServer() { var url = "ws://192.168.137.27:8081/hao/msg"; if ('WebSocket' in window) { ws = new WebSocket(url); } else if ('MozWebSocket' in window) { ws = new MozWebSocket(url); } else { alert('浏览器不支持'); return; } ws.binaryType = "arraybuffer"; ws.onopen = function() { alert('Opened!'); }; // 收到服务器发送的文本消息, event.data表示文本内容 ws.onmessage = function(event) { if(event.data instanceof ArrayBuffer){ var bytearray = new Uint8Array(event.data); var tempcanvas = yourCanvas; tempcanvas.height = imageheight; tempcanvas.width = imagewidth; var tempcontext = tempcanvas.getContext('2d'); var imgdata = tempcontext.getImageData(0,0,imagewidth,imageheight); var imgdatalen = imgdata.data.length; for(var i=8;i<imgdatalen;i++){ imgdata.data[i] = bytearray[i]; } tempcontext.putImageData(imgdata,0,0); var img = document.createElement('img'); img.height = imageheight; img.width = imagewidth; img.src = tempcanvas.toDataURL(); var chatdiv=document.getElementById("chatdiv"); chatdiv.appendChild(img); chatdiv.innerHTML = chatdiv.innerHTML + "<br />"; }else{ alert('Receive message: ' + event.data); } }; ws.onclose = function() { alert('Closed!'); } ws.onerror = function(err){ alert(err); }; } //发送信息 function sendMessage(){ var textMessage=document.getElementById("textMessage").value; if(ws!=null&&textMessage!=""){ ws.send(textMessage); } } function sendphoto(){ imagedata = context.getImageData(0, 0, imagewidth,imageheight); var canvaspixelarray = imagedata.data; var canvaspixellen = canvaspixelarray.length; var bytearray = new Uint8Array(canvaspixellen); for (var i=0;i<canvaspixellen;++i) { bytearray[i] = canvaspixelarray[i]; } ws.send(bytearray.buffer); context.fillStyle = '#000000'; context.fillRect(0, 0, imagewidth,imageheight); } </script> </html>
tomcat7下的服务端
HelloWorldWebSocketServlet.java
package com.hao; import java.io.DataInputStream; import java.io.IOException; import java.io.PrintWriter; import java.net.Socket; import java.net.UnknownHostException; import java.nio.ByteBuffer; import java.nio.CharBuffer; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.Random; import javax.servlet.http.HttpServletRequest; import org.apache.catalina.websocket.MessageInbound; import org.apache.catalina.websocket.StreamInbound; import org.apache.catalina.websocket.WebSocketServlet; import org.apache.catalina.websocket.WsOutbound; public class HelloWorldWebSocketServlet extends WebSocketServlet { public static Map<String,MyMessageInbound> mmiList = new HashMap<String,MyMessageInbound>(); protected StreamInbound createWebSocketInbound(String subProtocol, HttpServletRequest arg1) { return new MyMessageInbound(); } public int getUserCount(){ return mmiList.size(); } private class MyMessageInbound extends MessageInbound { WsOutbound myoutbound; String mykey; @Override public void onOpen(WsOutbound outbound) { try { System.out.println("Open Client."); this.myoutbound = outbound; mykey =""+System.currentTimeMillis();; mmiList.put(mykey, this); System.out.println("mmiList size:"+mmiList.size()); outbound.writeTextMessage(CharBuffer.wrap("open "+mykey)); } catch (IOException e) { e.printStackTrace(); } } @Override public void onClose(int status) { System.out.println("Close Client."); //mmiList.remove(this); mmiList.remove(mykey); } @Override protected void onBinaryMessage(ByteBuffer arg0) throws IOException { System.out.println("websocket-----onBinaryMessage:"+arg0.toString()); for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) { System.out.println(entry.getKey()+"--bin---"); MyMessageInbound mmib = (MyMessageInbound) entry.getValue(); mmib.myoutbound.writeBinaryMessage(arg0); mmib.myoutbound.flush(); } } @Override protected void onTextMessage(CharBuffer message) throws IOException { System.out.println("onText--->" + message.toString()); String[] msgarray= message.toString().split(","); for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) { System.out.println(entry.getKey()+"-----"); MyMessageInbound mmib = (MyMessageInbound) entry.getValue(); CharBuffer buffer = CharBuffer.wrap(message); System.out.println(buffer); mmib.myoutbound.writeTextMessage(buffer); mmib.myoutbound.flush(); } } } }
tomcat的配置文件:
<?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0" metadata-complete="true"> <servlet> <servlet-name>haomsg</servlet-name> <servlet-class>com.hao.HelloWorldWebSocketServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>haomsg</servlet-name> <url-pattern>/hao/msg</url-pattern> </servlet-mapping> </web-app>
发表评论
-
websocket直播
2020-05-22 17:59 4271.websocket转发的最简单server 2.h5接收w ... -
indexedDB存图片减少请求
2020-05-21 19:23 512getImageFile()获取网络图片 showImage ... -
vizceral-example的例子
2020-03-19 18:53 316自定义图和加载结构 代码在 https://github.c ... -
jsonpath的helloworld
2020-03-17 14:58 372基本语法:https://www.cnblogs.com/jp ... -
流动图神器vizceral
2019-10-12 19:04 438把c的代码生成json:https://github.com/ ... -
openresty聊天室的helloworld
2018-04-22 19:25 724openresty的websocket + redis的sub ... -
openresty websocket
2018-04-18 17:08 1411mac安装openresty brew install o ... -
emscripten asm.js的helloworld
2018-03-01 20:15 1068mac下安装: brew install SDL2 SDL2_ ... -
nginx代理wss和https
2018-02-27 15:34 3859nginx启用ssl yum install openssl ... -
websocket上传文件
2016-12-15 13:30 4369nginx的上传 查看http://haoningabc.it ... -
webpack的helloworld
2016-11-02 10:42 879参考 http://www.jianshu.com/p/42e ... -
iphone6等移动端的css自适应
2016-10-17 01:18 1169参考 http://jingyan.baidu.com/art ... -
websocket和tap使用select关联
2016-06-14 22:01 715c语言的socket基础http://haoningabc.i ... -
javascript自定义事件
2016-06-01 21:49 522一言不合上代码 <input value=" ... -
html5的fiesystem api 浏览器本地存储
2016-06-01 15:59 884html5的fiesystem api可以存取本地文件 一言不 ... -
angularjs使用include后双向绑定失败的解决
2015-12-20 19:41 1836原理参考 http://segmentfault.com/q/ ... -
websocket相关调研 总结帖
2014-12-21 21:53 3942最近把websocket的客户端和服务端使用过的调通的例子总结 ... -
html5 陀螺仪
2014-11-26 21:05 5822<html> <head> ... -
webgl的贝塞尔曲线
2014-11-12 00:56 2488BezierCurve webgl的贝塞尔曲线 webgl ... -
chrome app的helloworld
2014-11-11 13:56 671参考 http://blog.csdn.net/rydiy/a ...
相关推荐
WebSocket传视频方法总结
基于websocket的网页即时通讯(可传附件图片涂鸦、最小化弹窗).NET superwebsocket做的winform服务端,UEditor做的附件等小功能 代码简陋仅供参考
WebSocket传输图片-附件资源
C# WinForm 通过WebSocket 实现文件传输示例,包含了客户端和服务端。
基于websocket的网页即时通讯(可传附件图片涂鸦、最小化弹窗).NET superwebsocket做的winform服务端,UEditor做的附件等小功能 代码简陋仅供参考
how to send sound file
[C++][OpenCv]利用Socket通讯类传输图片或者视频,全部源文件,可以直接运行debug模式
今天搬迁服务器发现图片文件打包拷贝实在太大了。传起来太费时间,所以就写了个简单的文件传输小功能进行传输,原理就是客户端发送请求把文件发送到服务端接收接口处理保存就行了
小程序高级教程 websocket 微信支付 打开图片API 上下传API 等等教程 文件属于百度网盘链接
用API发送POST数据,支持二进制,即:可以用POST像网站发送图片数据,经测试可行
基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统,拥有简洁漂亮的界面,实现了G级别文件极速上传下载,断点续传以及秒传功能
如何使用 Google 的协议缓冲区通过 websocket 以 base64 格式发送图像的示例 要运行这个应用程序,你需要在你的机器上克隆这个 repo 并运行: npm install 下载依赖项后,您需要运行 websocket 服务器并运行应用...
可以连接同步到每台设备,用户可以上传自己的图片并自定义生成文字,通过Canvas函数库生成指定样式的图片,然后将图片生成适合物联网设备渲染数据的二进制格式,通过WebSocket和Wi-Fi模块传输到设备端中。...
4、图片及文件互传功能(商业版) 5、客服可使用移动设备提供服务(商业版) 6、访客语音接通前由智能机器人提供文字服务(商业版) 7、中英文双语自动切换, 对外贸易业务更方便 8、系统完全独立安装和使用, 不依赖...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...
06 FTP之断点续传 08 FTP之进度条 09 FTP之cd切换 11 FTP之创建文件夹及MD5校验思路 第33章 01 操作系统历史 02 进程的概念 03 线程的概念 04 线程的调用以及join方法 05 setDaemon方法和继承式调用.baiduyun....