html使用socket实时传数据,HTML5WebSocket实现实时视频文字传输

HTML5的Canvas 可以实现绘图 然后应该是这样写的

01

02

03

04

05

06

07

08

09

走你~

10

11

12

13

14

var wsServer = 'ws://192.168.10.242:9999/webSocket.ashx'; //服务器地址

15

//var wsServer = 'ws://localhost:36027/webSocket.ashx'; //服务器地址

16

var canvas = document.getElementById("myCanvas");

17

var context = canvas.getContext("2d");

18

var websocket = new WebSocket(wsServer); //创建WebSocket对象

19

websocket.onopen = function (evt) {

20

//已经建立连接

21

alert("已经建立连接");

22

};

23

websocket.onclose = function (evt) {

24

//已经关闭连接

25

//alert("已经关闭连接");

26

writeToScreen("连接关闭");

27

};

28

websocket.onmessage = function (evt) {

29

//收到服务器消息，使用evt.data提取

30

var image = new Image();

31

image.onload = function () {

32

//image.height

33

context.clearRect(0, 0,

34

canvas.width, canvas.height);

35

context.drawImage(image, 0, 0, canvas.width, canvas.height);

36

}

37

image.src = URL.createObjectURL(evt.data);

38

};

39

websocket.onerror = function (evt) {

40

//产生异常

41

writeToScreen(evt.message);

42

};

43

function sendMsg() {

44

if (websocket.readyState == websocket.OPEN) {

45

msg = document.getElementById("msg").value;

46

websocket.send(msg);

47

writeToScreen("发送成功!");

48

} else {

49

writeToScreen("连接失败!");

50

}

51

}

52

53

function writeToScreen(message) {

54

var pre = document.createElement("p");

55

pre.style.wordWrap = "break-word";

56

pre.innerHTML += message;

57

output.appendChild(pre);

58

}

59

60

61

通过   context.drawImage(image, 0, 0, canvas.width, canvas.height); 来绘制图像

websocket接到数据后通过

image.src = URL.createObjectURL(evt.data);转换成图片对象

ok 这样能实现接收图片了，然后服务端发送的时候

1

//Buffer里面为你的图片数据 你可以通过文件流的方式来打开

2

await socket.SendAsync(buffer, WebSocketMessageType.Binary,true, CancellationToken.None);

3

//注意此时WebSocketMessageType 为Binary二进制流

然后我实现了一个 读取本地文件夹 每隔1秒发送图片给网页的服务端

部分代码如下

01

string imgPath = HttpContext.Current.Server.MapPath("images");

02

string[] files = Directory.GetFiles(imgPath);

03

for (int i = 0; i

04

{

05

using (FileStream fs = new FileStream(files[i], FileMode.Open))

06

{

07

byte[] imgData = new byte[fs.Length];

08

fs.Read(imgData, 0, imgData.Length);

09

//buffer = new ArraySegment(Encoding.UTF8.GetBytes(userMessage));

10

buffer = new ArraySegment(imgData);

11

// Asynchronously send a message to the client

12

await socket.SendAsync(buffer, WebSocketMessageType.Binary,

13

true, CancellationToken.None);

14

Thread.Sleep(1000);

15

}

16

if (i == files.Length - 1)

17

i = 0;

18

}

这样图像传输解决了,然后实现套接字 就可以传输实时图片了。

我做了一个Windows Phone的客户端不断的采集图片发送给服务器 然后服务器接到图片发送给浏览器的Demo 就不贴代码了 上图！

(这张图是在Windows Phone模拟器里面的IE浏览器上 证明了 它支持WebSocket)

(Windows 上的客户端 ^.^ Windows Phone Windows 8都能的 )

上面说的仅仅是简单的演示程序 距离做项目还差的很远，写这篇文章为的是给大家一个信心... Windows 8&Windows Phone也可以的...