在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>
& y% y5 D, c! m& u. x7 ^
<html xmlns="http://www.w3.org/1999/xhtml">5 e$ W7 O. F, [" M
<head>& }7 e; C6 k3 @4 I* z
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>/ o. J, g- M/ e% [! x
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
2 s# f% R* |/ h" i
<title></title>
! N7 ^) V! Z* C* I& I6 v6 D
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
, o0 T' L9 R# y: L( N6 O: o
<script>! K5 b: \* `* n$ Z4 q* F- v P
var ws;
P: i) q7 |7 X% D$ w4 u
$().ready(function () {
! i9 E. F. m W' u0 k; Y0 D0 g
$('#conn').click(function () {
8 j! P% o7 K, z- a# s' ?& I8 a# @9 P
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());7 D1 t/ w/ [' W% g% h3 M
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());6 o9 u9 y p/ o. Y
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
: `3 ^0 G& n7 N! }. Y6 e. d/ |
//var host = "ws://192.168.85.128:8085/api/WSChat";
5 I# L/ E2 C! B% R
//webSocket = new WebSocket(host);
- n0 q4 p- d. F% }+ x3 m5 A6 Z4 D
! ]' C+ q/ q( e
$('#msg').append('<p>正在连接</p>');
4 k0 @5 Y' g& r
; M7 i( j9 R: S
ws.onopen = function () {
+ Y/ c0 h: w/ Y# e a8 R
$('#msg').append('<p>已经连接</p>');
( A5 e Z+ `: h4 n9 r
}& g- D- J b$ Q9 c( g' S: Y
ws.onmessage = function (evt) {+ Q% |) F6 P( Y; y7 w, E
$('#msg').append('<p>' + evt.data + '</p>');% x* @# G" i7 s: \( D
} `6 ^6 O( y( L) \ e" o
ws.onerror = function (evt) {
y' y9 q3 o, ?" n, @& Y
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
* l; \/ T; V3 y, S9 R) c
}
% F( [7 @8 S$ @' i4 {" u4 y4 x
ws.onclose = function () {
8 f2 x& N) f0 _# C( H
$('#msg').append('<p>已经关闭</p>');& D3 Q/ w. s" ~& n' k+ Y
}/ s% S+ m. _9 p7 s
});1 g, Q4 ?# Q. n: j; _
% |0 J; a9 k) }4 ~
$('#close').click(function () {7 |2 f* I* u8 @& [) Z2 ^# U7 s
ws.close();
( w! m7 i4 y- f9 M3 n
});
! _; O( o C3 S" s+ i2 i
5 }5 n* Q/ a6 c; M8 ~1 ~4 z
$('#send').click(function () {
]7 k# \- s6 _: i
if (ws.readyState == WebSocket.OPEN) {3 U$ L4 a# V) I
ws.send($("#to").val() + "|" + $('#content').val());
% w( _& H# ^: |6 D
}
/ @, k/ E- o- O$ u8 ]
else {$ a F5 e7 B6 q+ Y5 h
$('#tips').text('连接已经关闭');' C. l9 l) P/ i
}; ]( r$ t# W$ t+ J# J
});
/ ?* `; D% k: k1 p
6 D( I- Q' Z4 ~8 ]5 l7 \) e3 L L
});) {) f2 o6 ]1 i# k! m% [7 W2 {
</script>
: N1 U% q) m2 \+ N4 A0 u+ c, I8 l
</head>" ^' s- C, S3 ? K
<body>" L4 R5 }1 P& \1 {4 [6 ?
<div>
; v- F8 r, b2 _1 f
<input id="user" type="text" />
# N( m' ~# }% ~1 ?
<input id="conn" type="button" value="连接" />) T7 g) i' v v* _: v1 Q- p1 v
<input id="close" type="button" value="关闭"/><br />
; z/ \# W' ~) l
<span id="tips"></span>9 |! \- k7 d7 H# ^) c8 x8 ~: h
<input id="content" type="text" />
- _3 G5 G ~$ h- E+ k6 B. ?0 ?
<input id="send" type="button" value="发送"/><br />
# M% n! i2 g6 U I
<input id="to" type="text" />目的用户
, H C$ o! N# w; j2 v3 N8 _- W( D; v
<div id="msg">
+ y( ~6 a9 x. n
</div>0 W0 `- ~/ j3 ~0 J/ z! J: C
</div>& T0 M; T7 m: R% L, k8 ]
</body>
8 e1 v/ W4 @: f. Q" |& P
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

帐号		自动登录	找回密码
密码			立即注册

[html5] 在IIS上搭建WebSocket服务器（三）

浏览过的版块