在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>
8 h- q6 C* P1 [7 b6 n ] p# W
<html xmlns="http://www.w3.org/1999/xhtml">/ p* i3 h9 ?2 d( R; [" B
<head>
+ A* x+ D0 ~+ |/ d% R% F- a6 _; X
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8 x) y+ u6 q1 E% s' w& s
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
7 c6 ~( e# a9 d5 `+ B
<title></title>
/ p# n+ w* M/ |8 H+ I* d
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
+ D# r0 B6 R, \( L; P, [" V
<script>
8 @2 L! Q: D3 r. o4 A
var ws;
5 t j; w) z+ e" B0 w
$().ready(function () {
: O9 f3 H# C. g
$('#conn').click(function () {
: L; ?* x7 v9 a: R$ l
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
7 X* }6 m; L0 t: b/ j
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());% _3 M( G& b" L$ z) m# K
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();2 \" y" R4 m' ]! L( D; d
//var host = "ws://192.168.85.128:8085/api/WSChat";
4 \! g- ^/ v7 I$ g l
//webSocket = new WebSocket(host);
+ O2 c2 E& ?( m
! a9 {9 ?" y% r) m
$('#msg').append('<p>正在连接</p>');
2 k8 [4 O; G" v3 N) Y( ^0 P
% |2 f+ A. b8 R5 p& ]
ws.onopen = function () {
' o$ u' H# p5 D# C6 [+ r& e4 J+ T
$('#msg').append('<p>已经连接</p>');
9 Z3 I' O9 b) v4 P0 M0 C4 j
}
; b) H' }' m) F+ {8 D9 B/ ]
ws.onmessage = function (evt) {: f4 |/ u: n$ A! F
$('#msg').append('<p>' + evt.data + '</p>');
/ y8 [6 [) z4 c5 v6 i2 `
}( s, M* ?2 n8 [- a# y
ws.onerror = function (evt) {
; o d4 U. J. q4 B
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');2 a. B& j6 s8 A) [' I! p/ y( _
}8 M* d6 j |) i
ws.onclose = function () {
; j+ ?! ]8 x4 e( |+ H' ?9 Z
$('#msg').append('<p>已经关闭</p>');
& M2 X+ q: ?) U: m) h8 ^
}
# |! I! S, v2 g2 c- L
});7 j* b! G5 N' Y1 L
2 G& u! Q1 P$ B5 h4 _
$('#close').click(function () {
; ]9 Q2 ~2 C& k- ]
ws.close();
) t+ I* g4 z* ]; @( }% @3 e2 o$ Z
});& q6 T P2 Q- c, ?& x7 ?
B/ K1 o, ^8 u' A: [! Q% h
$('#send').click(function () {0 s; L0 d, z9 Q" v
if (ws.readyState == WebSocket.OPEN) {( i5 ?7 t) K Q/ _; k. Z
ws.send($("#to").val() + "|" + $('#content').val());7 B" j3 Q$ R5 Q8 j4 R, O1 F1 U7 \. @
}5 s) B( W) B/ {+ A3 Y6 Y
else {* j( O4 M; Q& O* v
$('#tips').text('连接已经关闭');
' y4 K; H" W9 O1 `4 }3 B
}# o( G1 m* W, v; p0 d, D
});2 Z' i: K1 U- w ^$ j8 C
. {+ }2 S, S9 s* z! Y, n
});
2 ?/ J/ d) I3 h1 I
</script>, ~1 _! x. A' Q" C
</head>
8 [9 G8 C+ g5 r
<body> \" K' ^) F Y* z k
<div>
+ e! ?6 l/ c c
<input id="user" type="text" />: @1 R. P' j7 C% C; N
<input id="conn" type="button" value="连接" />
7 }# l1 _. B) ~' l
<input id="close" type="button" value="关闭"/><br />
8 v" P2 D4 I! p# z4 ]2 a. }
<span id="tips"></span>8 x P# _. A o
<input id="content" type="text" />( o% B2 a3 |4 S$ e0 W4 j( k
<input id="send" type="button" value="发送"/><br />
7 ]/ c( f1 }9 @7 X: z& ]6 |! p
<input id="to" type="text" />目的用户
T! E; f" o, v% A
<div id="msg">/ k# B t/ V8 d7 t+ f) u
</div>
+ `' p( L/ `# A k: {
</div>+ l7 b- s, I( {+ {: R0 n0 K9 V% w
</body>/ f5 N$ M4 n z% p0 S9 ?6 a# Y
</html>

复制代码

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

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

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

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

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