在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>$ M& M% z9 s9 \) B! R1 @
<html xmlns="http://www.w3.org/1999/xhtml">+ v" f5 T4 C' ^
<head>
5 l3 K; c- w% r/ {- A. }1 {/ Y% A3 j
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
. ^# A T" [" j: k/ H0 ~" ?0 n
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>/ j+ Q% a: }8 ^ X: P
<title></title>& t1 \2 U# d8 Y& l# n' N% W
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>8 F: ^* r. d" a6 d) ^- J7 }! F
<script>
8 S/ P- n* H' `( R/ T3 |% ?
var ws;, v+ e* V) C- `8 z% d
$().ready(function () { p6 f2 R4 l( {' N, ~9 ]$ W
$('#conn').click(function () {
# g! l1 V9 e/ J1 q- w% W' k
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
( O% Q( x$ \7 Y U
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
5 ~4 C- L; F v2 W; m8 N- F6 Z2 H
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
" O' z* D# }$ u d* \' L' {
//var host = "ws://192.168.85.128:8085/api/WSChat";
% G" ?8 e s( G. q% e7 ~7 k
//webSocket = new WebSocket(host);
0 C9 {( U2 i, q7 Q7 H
' ?- Y" A# v9 i2 P
$('#msg').append('<p>正在连接</p>');/ T1 D1 V: I: `" h$ g3 E
6 [' }4 _# E" [) J
ws.onopen = function () {+ C+ I. A! A$ J5 t. V! r6 ^
$('#msg').append('<p>已经连接</p>');
9 m. U! Z8 h/ a7 L
}7 H- `4 g6 X- @, y7 F5 J
ws.onmessage = function (evt) {# I& u2 l$ s1 R; u) \
$('#msg').append('<p>' + evt.data + '</p>');
! Q# }) F; A1 Q* K X: A3 X
}6 ~: f7 x& s+ h! u# d5 j) g; C
ws.onerror = function (evt) {
9 G& ?/ r+ c& [3 T9 F5 ^
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');' \( n1 o* t+ _4 h. |# l
}
* Y, }1 P/ Q" v7 e' a4 G6 D
ws.onclose = function () {% o/ o' G) W1 @# r: H- O
$('#msg').append('<p>已经关闭</p>');! l. p6 }! _% \: G1 u. I+ h
}/ C! l# |4 K; h
});! G' l; I0 A6 w: I( a7 x
5 k4 s* b7 ]4 r' P$ v2 ?
$('#close').click(function () {
/ k! O6 O; J. r; D6 s2 z1 i
ws.close();
]2 n0 x R, a$ h. q2 q
});% s' y6 ?# X. w8 i& j) [' r. P. h9 W
) E& F+ P+ e" v) @/ g$ ^
$('#send').click(function () {/ e: x, _5 y) ]1 i2 O
if (ws.readyState == WebSocket.OPEN) {
7 f, `6 a/ B4 V
ws.send($("#to").val() + "|" + $('#content').val()); W: S6 C; b. r6 f; M
}0 Y+ U5 N, a4 B* W
else {# I9 j1 F0 o F ]; A5 t* [9 T
$('#tips').text('连接已经关闭');) e0 r/ U1 x3 A( Y, B
}
( q' D7 x, B% A/ v& q% T+ C9 g% I
});7 @) f0 p+ ~; {6 ~1 M1 P
+ z: v$ l' @0 a
});; r5 @& x+ {1 |" g5 m8 Y( U7 s( O9 z
</script>
4 v( w. E/ X2 W! N3 X( `1 s2 Q d
</head>
5 M" j3 {# B, e: j
<body>! s |" ]+ ]6 j
<div>) t2 m! ^' u( j4 y, w, I
<input id="user" type="text" />
3 R0 J! u/ ]# [6 [
<input id="conn" type="button" value="连接" />9 M2 m( L- v( J' N
<input id="close" type="button" value="关闭"/><br />
1 q. }+ k( y# ]; F% x% r
<span id="tips"></span>2 E2 s# U7 ?/ n$ p( i
<input id="content" type="text" />7 o0 E7 h; B$ Y
<input id="send" type="button" value="发送"/><br />
/ N' e+ E$ H& T
<input id="to" type="text" />目的用户
0 }9 c) Q" E9 e- c7 p
<div id="msg">. E2 W3 W9 @# |( ]. Z% L
</div>' X" c- ~) k% y; H0 z" j" a" e
</div>/ Q0 y# W6 R' y! }6 N5 x% F0 Z
</body>
' Q1 _4 J+ S# A, w
</html>

复制代码

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

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

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

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

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