在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>
1 N, |1 O: N4 e3 }3 ~
<html xmlns="http://www.w3.org/1999/xhtml">- C2 c; g4 T$ S9 {# \! G; c
<head>" a% o* ]2 _, D2 o, E& M
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
0 a2 Y8 {* I z$ m' l
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>; S- L% y3 B7 k% m: z. H! C
<title></title>
# L7 Z! J& Q3 ]4 q+ R
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
( `7 u6 [: \! A* B, u Y
<script>
k1 p% F( M$ G7 Q: p/ V3 M' \; t
var ws;
) w1 r$ D; W r2 `4 Q8 ]" C% I! V
$().ready(function () {) l. A. A6 e( _7 z/ V# D" a
$('#conn').click(function () {
4 B9 R9 y* ]: l
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
! N- m1 I k. V* q# C
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());' K+ J. s/ C; S3 P: Z5 o ~
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();# k5 K- y! z: {6 `
//var host = "ws://192.168.85.128:8085/api/WSChat";% S0 j, n6 q' |1 r! M: d+ U) {5 P
//webSocket = new WebSocket(host);
, T4 Z, r3 K( j/ N4 O
* v# P' V$ w! y9 G
$('#msg').append('<p>正在连接</p>');% {1 T$ t% g/ ~2 d) v d' d9 K
) N" x" y# A( ^- k. m/ F
ws.onopen = function () {3 @ \, H6 J4 f, \+ w+ T5 i
$('#msg').append('<p>已经连接</p>');: d% e- z' e! _
}
; E( c7 Z. r& {8 l
ws.onmessage = function (evt) {
. M! F7 {; a6 G
$('#msg').append('<p>' + evt.data + '</p>');: } W, l0 I8 E% o f
}
# _# N _; R% p4 M
ws.onerror = function (evt) {
& a7 ]% O, ~( `, d5 q! A$ e3 p
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
, L7 k/ ?2 E; U$ B7 r
}7 T$ {" |. X- T% f7 m
ws.onclose = function () {2 v+ [3 ^. z" C2 V
$('#msg').append('<p>已经关闭</p>');
6 t& d9 g5 ? u" L: X# w& [& S
}5 R& |' F) n. X+ U3 j
});9 W! O+ v0 W* E
" a9 |" a/ r8 x
$('#close').click(function () {2 g0 K" l& B& `# }8 m# f5 g
ws.close();& @/ A8 Y1 e% r0 ^5 Z# r
});$ |5 f% Y9 i8 c! n8 S2 l( x" K
1 Y3 ~ q3 r% h2 t# b5 T2 o
$('#send').click(function () {
# {# R, I5 P s I8 d
if (ws.readyState == WebSocket.OPEN) {
0 Y6 i' V% W$ Q+ ]. E/ r% I
ws.send($("#to").val() + "|" + $('#content').val());* @( S4 A2 @7 r, S$ e
}
9 E5 U* K" @$ L$ A* ]0 _4 y
else {1 |, n0 O' V+ Y" N$ e* M; d i9 e2 \
$('#tips').text('连接已经关闭');
) g6 Q/ f8 T3 k# o4 k8 I- }
}
, c3 k9 w! Y8 H4 {' T
});& O. m- c6 r& ~* l3 d
# ?. S# ^" a; C/ G
});
, a) e9 q) G$ n7 g# k8 s& J+ k; j" ]
</script>
! f' Y) v9 s4 L
</head>. x. n( x6 Y$ Q- c6 o" j
<body>" n8 Z' h5 z" T
<div>
' `' {+ @1 N8 l
<input id="user" type="text" />3 R0 B2 L* Y% `% m' w4 S( m/ e# \
<input id="conn" type="button" value="连接" />7 M$ A& s7 [" S
<input id="close" type="button" value="关闭"/><br />
+ u" S- z( g7 g1 D" q5 h: I9 L
<span id="tips"></span>
; r) t9 x |. ~/ L: z
<input id="content" type="text" />8 v' f$ u1 {: o7 i6 ?+ S8 `6 M
<input id="send" type="button" value="发送"/><br />
' ]' [* W$ g$ E: ]% c
<input id="to" type="text" />目的用户$ o- u0 ^9 c( L( p
<div id="msg">
5 a6 n% O B% {2 |$ R% A
</div> O' y# d3 o1 k# Y L( x7 J
</div>
4 \' G2 S7 {6 l4 q
</body>2 u" V3 F" }1 {% o
</html>

复制代码

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

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

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

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

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