socket.io 入门篇(二)

摘要:
varexpress=要求(“express”);//引入expressvarsocketIo=require(“socket.io”);varo=newsocketIo(服务器);服务器监听(8080);fn){clientSocket.join(data.roomName);fn){clientSocket.lefe(data.rroomName);

本文原文地址:https://www.limitcode.com/detail/5922f1ccb1d4fe074099d9cd.html

前言

上篇我们介绍了 socket.io 基本使用方法,本篇我们继续深入了解 socket.io 中 room(房间)的概念和使用。

对于 room 的概念,你只需理解3个地方就可以:

1. 在不加入或指定room的情况下,socket.io 会默认分配一个default room

2. 同一room下的socket可以广播消息

3. join(房间名) 加入一个房间;leave(房间名) 离开一个房间;broadcast.to(房间名).emit() 给同一个房间的其他socket广播消息

源码下载地址:http://pan.baidu.com/s/1eSaf1Pg

项目文件结构

socket.io 入门篇(二)第1张

服务端

/**
 * Created by mike on 2017/5/15.
 */

var http=require("http");
var express=require("express");//引入express
var socketIo=require("socket.io");//引入socket.io

var app=new express();

var server=http.createServer(app);
var io=new socketIo(server);//将socket.io注入express模块

//客户端 1 的访问地址
app.get("/client1",function (req,res,next) {
    res.sendFile(__dirname+"/views/client1.html");
});
app.get("/client2",function (req,res,next) {
    res.sendFile(__dirname+"/views/client2.html");
});
server.listen(8080);//express 监听 8080 端口,因为本机80端口已被暂用
console.log("服务已启动");

//每个客户端socket连接时都会触发 connection 事件
io.on("connection",function (clientSocket) {
    // socket.io 使用 emit(eventname,data) 发送消息,使用on(eventname,callback)监听消息

    //加入房间
    clientSocket.on("joinRoom",function (data,fn) {
        clientSocket.join(data.roomName); // join(房间名)加入房间
        fn({"code":0,"msg":"加入房间成功","roomName":data.roomName});
    });
    //退出 离开房间
    clientSocket.on("leaveRoom",function (data,fn) {
        clientSocket.leave(data.roomName);//leave(房间名) 离开房间
        fn({"code":0,"msg":"已退出房间","roomName":data.roomName});
    });
    //监听客户端发送的 sendMsg 事件
    clientSocket.on("sendMsg",function (data,fn) {
        // data 为客户端发送的消息,可以是 字符串,json对象或buffer

        // 使用 emit 发送消息,broadcast 表示 除自己以外的所有已连接的socket客户端。
        // to(房间名)表示给除自己以外的同一房间内的socket用户推送消息
        clientSocket.broadcast.to(data.roomName).emit("receiveMsg",data);
        fn({"code":0,"msg":"消息发生成功"});
    })
});

客户端(2个客户端页面内容一样)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端1</title>
</head>
<body>

<label>房间名:</label>
<input type="text" id="txtRoom"/>
<button type="button" id="btn-joinRoom">加入房间</button>
<button type="button" id="btn-leaveRoom">离开房间</button>
<br/>

<label>聊天内容:</label><br/>
<textarea id="content" style="height: 200px; 300px;"></textarea>
<br/>
<input  id="sendMsg" type="text"/>
<button id="btn_send">发送</button>

<!-- 首先引入 socket.io 客户端脚本-->
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
 var socket = io.connect();//连接服务端,因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
    // 监听 receiveMsg 事件,用来接收其他客户端推送的消息
 socket.on("receiveMsg",function (data) {
        content.value+=data.client+":"+data.msg+"
";
 });
 var content=document.getElementById("content");
 var sendMsg=document.getElementById("sendMsg");
 var btn_send=document.getElementById("btn_send");
 var btn_joinRoom=document.getElementById("btn-joinRoom");
 var btn_leaveRoom=document.getElementById("btn-leaveRoom");
 var txtRoom=document.getElementById("txtRoom");

 btn_leaveRoom.addEventListener("click",function () {
        socket.emit("leaveRoom",{"roomName":txtRoom.value},function (data) {
            //打印离开房间后服务端返回的信息
 console.log("离开房间:"+ JSON.stringify(data) )
        });
 txtRoom.value="";
 })
    btn_joinRoom.addEventListener("click",function () {
        var roomName=txtRoom.value;
 socket.emit("joinRoom",{"roomName":roomName},function (data) {
            //打印加入房间成功后返回的信息
 console.log("加入房间:"+JSON.stringify(data));
 })
    });
 btn_send.addEventListener("click",function () {
        if(!sendMsg.value){
            alert("请输入房间号");return;
 }
        var data={"msg":sendMsg.value,"roomName":txtRoom.value,"client":"客户端1"};
 //给服务端发送 sendMsg事件名的消息
 socket.emit("sendMsg",data,function (data) {
            //打印消息发送成功后服务端返回的信息
 console.log("消息发送:"+JSON.stringify(data));
 });
 content.value+=data.client+":"+data.msg+"
";
 sendMsg.value="";
 });

    

</script>

</body>
</html>

界面效果如下:

socket.io 入门篇(二)第2张

免责声明:文章转载自《socket.io 入门篇(二)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇数据安全:通过Oracle的基本函数实现简单加密脱敏函数配置solr客户端(全文搜索服务器)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

POJ 1386 Play on Words (有向图欧拉路径判定)

Play on Words Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8768   Accepted: 3065 Description Some of the secret doors contain a very interesting word puz...

Vue中开启关闭风场

<template> <div class="box"> <div ref="emap" id="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class...

JSP介绍

1. 概况答:1) 以文本为基础能够返回动态内容到客户端;2) Http是请求和响应的默认协议;3) 一个页面可以混和html代码、Java代码以及JSP标答;4) 允许访问组件;2. JSP的好处答:1) 通过组件使用支持组件模型和软件重用;2) 源文件改变自动编译;3) 用户自定义标签简化页面开发;4) 能把Web内容, Java代码分开(针对Serv...

一个CSS上中下三行三列结构的Div布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";><html xmlns="http://www.w3.org/1999/xhtm...

桌面小部件开发

AppWidgetProvider是android提供实现桌面小部件的类,本质是一个广播,即BroadcastReceiver。是继承关系 开发步骤: 1.在res/layout/下新建一个XML文件,命令为widget.xml,名称和内容可以自定义 <?xml version="1.0" encoding="utf-8"?> <Lin...

if的用法

if用法举例:求分数的等级 1 # include <stdio.h> 2 3 int main(void) 4 { 5 float score; //score分数 6 7 printf("请输入您的考试成绩: "); 8 scanf("%f", &score); 9 10 if...