在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>! w% w4 i0 I& w# H2 o
<html xmlns="http://www.w3.org/1999/xhtml">
/ V! c$ F1 X5 ]% ^
<head>! F" {/ Y; ?( {0 Y7 R2 I6 o
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
, _$ }+ c9 F) z4 c B2 t# ?8 G- K! u
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>0 j. P2 g7 ]1 y2 z% h
<title></title>0 d+ @) s" f+ u' a( H8 k# h
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>9 }% U5 ?: v4 W- d
<script>: f6 c0 O# _( ^
var ws;
2 V& g, |" E: X5 w. _
$().ready(function () {5 e1 J" L: a" V
$('#conn').click(function () {
( p6 }5 ~# p0 C, [
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());6 ~- x2 S: U; ?5 y( V
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());9 M8 { e( G* I. E A
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();0 a$ O# ^8 r4 a6 I2 b1 i
//var host = "ws://192.168.85.128:8085/api/WSChat";8 i( H0 G& i3 Q8 P( T
//webSocket = new WebSocket(host);: m. L9 x% X4 S5 c3 R+ h$ f! W
% [8 g4 Q6 \- f& P& P$ r$ k
$('#msg').append('<p>正在连接</p>');
8 F2 s6 c3 E& c% L9 ` r
z# y- W/ k2 v* U! Z& ]- n! O5 z
ws.onopen = function () {/ D: ^/ O2 ?! S0 e
$('#msg').append('<p>已经连接</p>');
% {6 R" E0 @/ V/ l& H6 i4 W6 { O* o
}
. |6 y1 o+ c- k! z, l' V
ws.onmessage = function (evt) {
& ]6 }2 C' a, ?! P
$('#msg').append('<p>' + evt.data + '</p>');- R3 T# J, o7 G( O: S7 P% @& \1 x
}1 `4 q8 p$ D4 s* L3 i, ^
ws.onerror = function (evt) {
; S1 w1 q4 h% F2 ^# L0 p9 a" N
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');* b9 L. k- W2 J; S- [ A, [
}
& o: [! v" V+ V- @: p( f
ws.onclose = function () {
& O1 T8 [+ r/ e2 F3 y
$('#msg').append('<p>已经关闭</p>');
5 N: O. C% {' I4 ^( T
}) t6 O5 l8 H6 S! I$ Z- o% S; w( Z
});4 w; Y, `' z- k
6 D& s; _) \3 L; A' w1 T
$('#close').click(function () {
% m- R+ x$ N5 D2 P
ws.close();! g: ]6 t) O; y5 Y& O- y+ \
});8 s. E+ l2 y% p0 S
! O% `, e7 A; r9 A
$('#send').click(function () {
4 L% M( }8 R: i/ ?# }
if (ws.readyState == WebSocket.OPEN) {
+ B6 p; Y0 k8 u z( r" q
ws.send($("#to").val() + "|" + $('#content').val());
$ A( ]. p3 |( F1 H% z- x+ \- n
}
4 \2 W# W. l- m( W4 o7 P* O* c. `
else {
3 H; D9 z3 S+ Q, F& G! a U/ C
$('#tips').text('连接已经关闭');% l# K) ~- Z, J' ?# _
}
! g5 o6 B% k7 y# W: v d
});+ r' a, b- J q, J) m J
0 U) H* V$ C& [2 T( K
});
6 z) r" j% @! ~0 o b" ~! K9 \
</script>
3 M9 S( ?4 m1 I% s0 s7 [) G( s3 A- s
</head>
2 m3 v9 i2 l$ M5 G7 u- C
<body>% `* I ]( d; @% i0 h
<div>
7 b* f& {7 s# g! O
<input id="user" type="text" />. m+ Z, g; W; F1 R# O9 Y
<input id="conn" type="button" value="连接" />
# F1 w8 e+ U6 ~# \ [3 |0 b6 L
<input id="close" type="button" value="关闭"/><br />
, P W; J* _% g( Z* f* _- o
<span id="tips"></span>
- l# o0 N' J6 o! z* o
<input id="content" type="text" />; o8 i/ D* K: g0 D* \/ q
<input id="send" type="button" value="发送"/><br /> K' q2 m2 g. r$ n
<input id="to" type="text" />目的用户
9 ~9 f8 n+ G& F, m& m
<div id="msg">
$ Y0 k% ?8 R1 |4 q6 J" F3 _
</div>
# i" O# x: K7 k- Q; `
</div>
, h2 B9 x% T& E1 p9 e& i
</body>
) E4 a z5 I& @' x% E' `
</html>

复制代码

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

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

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

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

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