在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>2 G4 ~0 M: G. k7 a/ F/ v9 w: ]
<html xmlns="http://www.w3.org/1999/xhtml">
7 D9 R& s* ~( }, l. `3 Q, }, H, ^
<head>6 e7 {- e1 F/ s! G
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
0 L" y7 K A) i- v4 T! [7 V
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>/ x( X7 N4 B$ ]5 {) A& v
<title></title>' y1 L B9 f4 y* k
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>2 F. u# P/ k9 P0 Z% I4 ?
<script> q$ ]( g; D& U5 Y
var ws;
; b! t* ]. `* Q5 m3 I }
$().ready(function () {' M9 C b+ \4 y
$('#conn').click(function () {
+ I. H" w. N0 z6 J: L0 A
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());4 k9 g/ T: v% N5 `& F, z
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());( W' K, m+ `' j- {4 e2 ?
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
" L( ~9 y% U8 G# T9 A, H) S
//var host = "ws://192.168.85.128:8085/api/WSChat";* ]2 {. K, T+ `9 y: ^$ F" G6 q0 y
//webSocket = new WebSocket(host);9 Q E6 p$ G* U7 {& w
6 ]3 y4 s- I2 W1 j* b
$('#msg').append('<p>正在连接</p>');
0 f' V1 @% L3 I' z6 z
3 S9 b0 Q$ h5 e1 `! w8 C* j0 D
ws.onopen = function () {- R/ M, A+ C4 |6 I# Y! u' g* r
$('#msg').append('<p>已经连接</p>');
! q8 I% V# q- Y9 S# i) b3 b
}5 ]! Q* J$ q, Z& b- Z7 C
ws.onmessage = function (evt) {' u3 m6 l8 P2 L, L
$('#msg').append('<p>' + evt.data + '</p>');
' d" W& y; C, `4 U$ h _1 e
}) g' f% ?2 o5 h1 Q- [ w9 e6 a/ ~5 c: j
ws.onerror = function (evt) {
3 q2 h; q- J T
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
* g1 Z- L- C" _4 `; J5 ?* x4 b
}, M3 ]# K+ b$ I4 P5 Y5 P
ws.onclose = function () {) D" t f5 S1 c
$('#msg').append('<p>已经关闭</p>');4 C9 L [7 d3 G/ i3 ]6 t
}( n: ]1 v$ i0 o( z% a% d ?8 V1 {
});
* t3 Z8 S4 F h, X9 {# B- j# [6 {
! G1 J+ _, [) M4 m- d
$('#close').click(function () {# g. z3 m7 r, ]0 x" h
ws.close();' n8 d7 | ?9 Y* o! a
});0 o; Q" b: z) {8 S( T/ r1 e
8 @/ S, K4 c4 |$ |7 s: [
$('#send').click(function () {) i! c- F( Y4 Z1 S! G" I/ E
if (ws.readyState == WebSocket.OPEN) {3 |% ^& G, |5 s; Z1 P3 {
ws.send($("#to").val() + "|" + $('#content').val());# p/ I2 L3 U$ V6 ?+ z
}( w5 r4 x* g# _; n& o0 R2 a. Z7 s4 ^
else {/ e6 Z3 T3 G- ]" h# J' W
$('#tips').text('连接已经关闭');
) f& W1 p1 L+ P4 I8 K2 w$ _
}
6 ` H G* S9 E V6 T: z
});
* |& E" U/ X A( d" Y1 M' \+ `
7 h- B5 u. M' d) ?/ c$ ^5 `
});- }2 \9 W' F6 e' ]$ _5 F$ S3 n( G
</script>( s& C( x: B/ O9 h
</head>
0 B3 {$ T* C' _. [ q5 Q6 O
<body>- o) A. y' V2 [" w" H! L" w
<div>
$ V% I* S# f A5 f' m2 c
<input id="user" type="text" />
8 H. A! R# b* d* T
<input id="conn" type="button" value="连接" />
( \/ f4 P1 g# ] p
<input id="close" type="button" value="关闭"/><br />
& ]4 N9 i/ q0 r. W& s9 h# f
<span id="tips"></span>! \$ P3 t+ t, N! J6 C+ k& M7 |
<input id="content" type="text" />5 h3 Z4 R0 y* J6 w
<input id="send" type="button" value="发送"/><br />! a6 U' X* A; O, X
<input id="to" type="text" />目的用户
7 D) u) t' [6 r* y1 s K
<div id="msg">% p# X( Z( f3 v7 b+ b' [: f
</div>: D' x4 R8 B/ W9 }) N" Q
</div>
* f5 E5 I1 |9 ]/ \+ ^
</body>
& E$ L$ X- ?6 f6 W- j2 O5 Q' n: x
</html>

复制代码

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

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

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

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

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

浏览过的版块